jQuery UI滑块标签

时间:2016-01-27 10:17:20

标签: jquery jquery-ui slider

我的页面上有以下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();
    });  

是否可以在滑块上轻松添加'min'和'max'标签?我还没有尝试这个,因为我不确定解决它的最佳方法。

由于

1 个答案:

答案 0 :(得分:0)

我不确定任何外部库,但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