jQuery UI 滑块标签答案

【问题标题】：jQuery UI slider labelsjQuery UI 滑块标签
【发布时间】：2016-05-04 05:41:41
【问题描述】：

我的页面上有以下 UI 滑块。

jQuery( document ).ready(function( $ ) {
        $( "#slider-payback" ).slider({
            range: "min",
            value:100,
            min: 18,
            max: <?php echo json_encode($max_payback); ?>,
            step: 6,

            slide: function( event, ui ) {
                $( "#payback-period" ).val( "" + ui.value )
                totalPayableFunc();
                monthlyPaymentsFunc();
            }
        });
        $( "#payback-period" ).val( "" + $( "#slider-payback" ).slider( "value" ) );
        totalPayableFunc();
        monthlyPaymentsFunc();
    });

是否可以在滑块上轻松添加“最小”和“最大”标签？我还没有尝试过，因为我不确定解决它的最佳方法。

谢谢

【问题讨论】：

您遇到了什么问题？
我试图在滑块的一端添加一个“最小”标签，在另一端添加一个“最大”标签。我只是不确定解决这个问题的最佳方法是什么。
bootsnipp.com/snippets/featured/… - 这个例子展示了如何去做。

标签： jquery jquery-ui slider

【解决方案1】：

我不确定是否有任何外部库，但 Jquery Slider 本身是不可能的。

但由于您只需要 Min 和 Max 标头，因此您可以将以下内容与 HTML 和 CSS 组合使用。

在 HTML 中的 Slider 元素前后添加标签。

<label>Min</label><div id="slider"></div><label>Max</label>

简单 CSS 下的用户

#slider {
    width: 50%;
    float :left;
}
label
{
    float : left;
}

JSFiddle http://jsfiddle.net/f74wzh8y/

你也可以看看这个。 jQuery UI Slider Labels Under Slider

【讨论】：

bootsnipp.com/snippets/featured/…