Question

我有一个包含4个jQuery滑块的页面，可以发送范围。我希望滑块以下列方式相互更新：为滑块＃1的最大值选择的值自动变为滑块＃2的最小值，滑块＃2的最大值自动变为滑块＃3的最小值，依此类推。这是我到目前为止所做的：

$(function() {
    $( "#slider-range" ).slider({
        range: true,
        min: 0,
        max: 10000000,
        step: 100000,
        values: [ 0, 1000000 ],
        slide: function( event, ui ) {
            $( "#amount" ).val( "$" + addCommas(ui.values[ 0 ].toFixed(2)) + " - $" + addCommas(ui.values[ 1 ].toFixed(2)) );
            $( "#amount_high" ).val(ui.values[ 0 ].toFixed(2));
            $( "#amount_low" ).val(ui.values[ 1 ].toFixed(2) - .01 );
            var high1 = ui.values[ 1 ];

        }
        });
$( "#slider-range2" ).slider({
        range: true,
        min: 0,
        max: 10000000,
        step: 100000,
        values: [ 0, 1000000 ],
        slide: function( event, ui ) {
            $( "#amount2" ).val( "$" + addCommas(ui.values[ 0 ].toFixed(2)) + " - $" + addCommas(ui.values[ 1 ].toFixed(2)) );
            $( "#amount_high2" ).val(ui.values[ 0 ].toFixed(2));
            $( "#amount_low2" ).val(ui.values[ 1 ].toFixed(2) - .01 );
        }
        });
$( "#slider-range3" ).slider({
        range: true,
        min: 0,
        max: 10000000,
        step: 100000,
        values: [ 0, 1000000 ],
        slide: function( event, ui ) {
            $( "#amount3" ).val( "$" + addCommas(ui.values[ 0 ].toFixed(2)) + " - $" + addCommas(ui.values[ 1 ].toFixed(2)) );
            $( "#amount_high3" ).val(ui.values[ 0 ].toFixed(2));
            $( "#amount_low3" ).val(ui.values[ 1 ].toFixed(2) - .01 );
        }
        });
$( "#slider-range4" ).slider({
        range: true,
        min: 0,
        max: 10000000,
        step: 100000,
        values: [ 0, 1000000 ],
        slide: function( event, ui ) {
            $( "#amount4" ).val( "$" + addCommas(ui.values[ 0 ].toFixed(2)) + " - $" + addCommas(ui.values[ 1 ].toFixed(2)) );
            $( "#amount_high4" ).val(ui.values[ 0 ].toFixed(2));
            $( "#amount_low4" ).val(ui.values[ 1 ].toFixed(2) - .01 );
        }

    });
});

我还想将滑块1的最小值锁定为0。

我想另一个问题是，这是否是最好的方法呢？

Answer 1

这是工作小提琴：

http://jsfiddle.net/8xVWY/13/

一些有用的提示：

如果要修复jQuery UI的最小范围滑块，请将其“范围”属性标记为“min”。

$( "#slider-range-min" ).slider({
          range: "min",
          value: 37,
          min: 1,
          max: 100
      });

只要用户停止滑动就会触发停止事件
您可以通过“选项”和“值”参数

//getter
var value = $( ".selector" ).slider( "option", "value" );
//setter
$( ".selector" ).slider( "option", "value", 37 );

您可以通过“min”参数

//getter
var min = $( ".selector" ).slider( "option", "min" );
//setter
$( ".selector" ).slider( "option", "min", -7 );

P.S：我只修复了第一个滑块的动作，而不是复制自己。其余的是复制 - 粘贴。

jquery范围滑块：将滑块1的最大值设置为滑块2的最小值

1 个答案: