4

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

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

$(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。

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

4

1 回答 1

4

这是工作小提琴：

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

几个有用的提示：

  • 如果要修复 jQuery UI 的范围滑块的最小值，请将其“范围”属性标记为“最小值”。
$( "#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 );

PS：我只修复了第一个滑块的动作，不复制自己。剩下的就是复制粘贴。

于 2011-12-19T21:49:20.070 回答