一個滑塊，返回兩個值

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

感謝您的任何意見！

來源

2013-02-10 Brian

您的考試ple代碼引用了id爲「slider」的元素，但是您的html不包含具有該id的元素。 – mrtsherman 2013-02-10 03:09:12

我會去這樣的：

$(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 &你的貢獻門把手！

$(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/

來源

2013-02-10 03:10:12 Dom

幹得不錯。您希望將金額1和2切換到與用戶界面相對應的位置，但它有效。這是根據你的代碼稍微清理一下的小提琴。另外，只是注意到，如果你來回滑動，舊值中的一個會被留下。你應該清除它。 http://jsfiddle.net/PXDJb/2 – mrtsherman 2013-02-10 03:18:43

這裏是一個額外的清理清除其他值時，第一個變化：http://jsfiddle.net/PXDJb/1/ @Brian這將解決這個問題。 – Doorknob 2013-02-10 03:20:44

非常好的工作每個人！絕對是一個團隊的努力！ – Dom 2013-02-10 03:21:31

如果你想在這裏一個類似的，你可以找到它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)); 
});

來源

2013-02-10 03:14:03 coder

一個滑塊，返回兩個值

回答

相關問題