0


小さな要件があります.JQuery UISliderを使用して2つのノブを持つ1つのスライダーを作成するためのこのコードを誰かが助けてください。しかし、両方に独自の範囲を持たせたいです。
たとえば、合計範囲が 1 ～ 100 の場合、最初のノブは 1 ～ 50 の間だけスライドし、2 番目のノブは 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 に答える