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

【问题标题】：jquery range slider: set max of slider 1 to min of slider 2jQuery范围滑块：将滑块1的最大值设置为滑块2的最小值
【发布时间】：2011-12-19 15:37:57
【问题描述】：

我有一个带有 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。

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

【问题讨论】：

标签： javascript jquery jquery-ui jquery-ui-slider

【解决方案1】：

这是工作小提琴：

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

几个有用的提示：

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

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

当用户停止滑动时触发停止事件
您可以通过“option”和“values”参数更改滑块的值

//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：我只修复了第一个滑块的动作，而不是复制自己。剩下的就是复制粘贴了。

【讨论】：