0

我有一个小要求.. 请有人帮我
，我有这段代码可以使用 JQuery UISlider 制作一个带有两个旋钮的滑块，但我希望两者都有自己的范围。
例如，如果总范围为 1-100，则第一个旋钮应仅在 1-50 之间滑动，第二个旋钮应在 51-100 之间滑动。 

<script>
$(function() {
    $( "#slider-range" ).slider({
        range: true,
        min: 1,
        max: 100,
        values: [ 1, 100 ],
        slide: function( event, ui ) {
            $( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
        }
    });
    $( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) +
        " - $" + $( "#slider-range" ).slider( "values", 1 ) );
});
</script>
4

2 回答 2

2

你可以这样做：

$("#slider-range").slider({
    range: true,
    min: 1,
    max: 100,
    values: [1, 100],
    slide: function(event, ui) {
        // Make sure first handle doesn't go over 50
        if ( ui.value == ui.values[0] && ui.value > 50 ) {
            return false;
        }
        // Make sure second handle doesn't go below 51
        if ( ui.value == ui.values[1] && ui.value < 51 ) {
            return false;
        }
        $("#amount").val("$" + ui.values[0] + " - $" + ui.values[1]);
    }
});
$("#amount").val("$" + $("#slider-range").slider("values", 0) + " - $" + $("#slider-range").slider("values", 1));

示例：http: //jsfiddle.net/petersendidit/kbHbc/1/

于 2011-06-11T14:18:46.867 回答
0

jQuery UI 滑块扩展 - 未来参考

我已经为现有的 jQuery UI 滑块小部件编写了一个扩展，它（也）可以满足您的需求。由于维护了代码，因此我不会将其粘贴在这里，因为您始终可以在我的博客上获得最新版本。

它支持什么

  • 最小和最大允许范围大小
  • 下限边界最大值 - 这就是你需要的
  • 上限边界最小值 - 这个也是
  • 自动范围滑动 - 当一个手柄达到最大范围大小时，它会拖动另一个手柄，将范围大小保持在最大值
于 2011-08-19T12:07:00.640 回答