滑塊上的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++;
            });
        }   
});