1

我想使用 jQuery 创建一个允许选择两个不同值的滑块。老实说，我不知道从哪里开始。

我希望它在两边都显示正值，但返回两个值。

例如：

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 回答