1

jQuery を使用して、2 つの異なる値を選択できる 1 つのスライダーを作成したいと考えています。正直なところ、どこから始めればよいかわかりません。

両側に正の値を表示したいのですが、2 つの値を返します。

例えば：

500----------0----------500

スライダーが左側に移動すると、「amount1」が返されます。右に移動すると、「amount2」が返されます。どちらの数値も正になります。私はこれを何時間もいじりましたが、役に立ちませんでした。

ここに私が取り組んでいるサンプルコードがあります。これは可能ですか？

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
$( "#slider" ).slider({
  value:0,
  min: 500,
  max: 500,
  slide: function( event, ui ) {
    $( "#amount" ).val( "$" + ui.value );
  }
});
$( "#amount1" ).val( "$" + $( "#slider" ).slider( "value" ) );
});
</script>
</head>
<body>

<p>
<label for="amount">Amount</label>
<input type="text" id="amount1" style="border: 0; color: #f6931f; font-weight: bold;" />
<input type="text" id="amount2" style="border: 0; color: #f6931f; font-weight: bold;" />
</p>

ご意見ありがとうございます。

4

2 に答える 2

2

私はこのようにそれについて行きます：

$(function() {
    $( "#slider" ).slider({
      value:0,
      min: -500,
      max: 500,
      slide: function( event, ui ) {
          if (ui.value > 0){
             $( "#amount1" ).val( "$" + ui.value );
          }else{
               //multiply by -1 to make positive
             $( "#amount2" ).val( "$" + parseInt(ui.value * -1));
          }
      }
    });
});

デモ: http://jsfiddle.net/TrgJR/

ご不明な点がございましたら、お気軽にお問い合わせください。

編集：

これはクリーンアップされたバージョンです。

貢献してくれた mrtsherman と Doorknob に感謝します!

$(function () {
    $("#slider").slider({
        value: 0,
        min: -500,
        max: 500,
        step: 10,
        slide: function (event, ui) {
            if (ui.value > 0) {
                $("#amount2").val("$" + ui.value);
                $("#amount1").val("");
            } else {
                //multiply by -1 to make positive
                $("#amount1").val("$" + parseInt(ui.value * -1));
                $("#amount2").val("");
            }
        }
    });
});

デモ: http://jsfiddle.net/PXDJb/1/

于 2013-02-10T03:10:12.090 に答える
1

ここで同様のものが必要な場合は、http://egorkhmelev.github.com/jslider/を見つけることができます。

（または）

これを行う別の方法は次のとおりです。DEMO

$(function() {
    $( "#slider-range" ).slider({
        range: true,
        min: 0,
        max: 1000,
        values: [ 75, 300, ],
        slide: function( event, ui ) {
            $( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
        }
    });
    $( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) +
        " - $" + $( "#slider-range" ).slider( "values", 1 ) );
});
于 2013-02-10T03:14:03.797 に答える