Question

我想使用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>

感谢您的任何意见！

Answer 1

我会这样做：

$(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));
          }
      }
    });
});

DEMO：http://jsfiddle.net/TrgJR/

希望这有帮助，如果您有任何问题，请告诉我们！

<小时/> 编辑：

这是一个已清理的版本。

谢谢你，mrtsherman＆amp; 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("");
            }
        }
    });
});

DEMO：http://jsfiddle.net/PXDJb/1/

Answer 2

如果你想要一个类似的，你可以找到它http://egorkhmelev.github.com/jslider/

（OR）

以下是另一种方法： 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 ) );
});

一个返回两个值的滑块

2 个答案: