javascript - 滑块上的jQuery ui滑块值

Question

我很好奇是否有人有一个预先存在的解决方案来将滑块的值放在滑块本身的句柄中，超出以下范围：

    $( "#slider-vertical" ).slider({
        orientation: "vertical",
        range: "min",
        min: 0,
        max: 100,
        value: 60,
        slide: function( event, ui ) {
            $( "#amount" ).val( ui.value );
            $(this).find('.ui-slider-handle').text(ui.value);
        }

注意：这不会设置滑块的初始值，但我知道需要这样做。

Answer 1

试试这个

​$(function(){
    $( "#slider-vertical" ).slider({
        orientation: "vertical",
        range: "min",
        min: 0,
        max: 100,
        value: 60,
        slide: function( event, ui ) {
            $( "#amount" ).val( ui.value );
            $(this).find('.ui-slider-handle').text(ui.value);
        },
        create: function(event, ui) {
            var v=$(this).slider('value');
            $(this).find('.ui-slider-handle').text(v);
        }
    });    
});​

演示。

Answer 2

如果您使用范围滑块单独设置每个滑块，则对此进行更新

$("#slider-vertical").slider({
        range: true,
        min:0,
        max:500,
        values:[1,300],
        slide: function( event, ui ) {
            $(ui.handle).text(ui.value);
        },
        create: function(event, ui) {
            var v = $(this).slider('values');
            var c = 0;
            $(this).find('.ui-slider-handle').each(function(){
                $(this).first().text(v[c]);
                c++;
            });
        }   
});