任何人都可以提供一些见解,我将如何计算两个滑块范围作为一个?如果最大范围是100并且用户将滑块1移动到30,则滑块2应移动到70.总值将始终是范围。设置相同的class
我认为是需要的,但我知道它远不止于此。
我的设置http://testzone.me/ia/price.html
这是jquery滑块http://loopj.com/jquery-simple-slider/
<input type="text" data-slider="true" value="0.8" data-slider-range="01,100" data-slider-step="0.2" data-slider-highlight="true">
<input type="text" data-slider="true" value="0.8" data-slider-range="01,100" data-slider-step="0.2" data-slider-highlight="true">
<script>
$("[data-slider]")
.each(function () {
var input = $(this);
$("<span>")
.addClass("output")
.insertAfter($(this));
})
.bind("slider:ready slider:changed", function (event, data) {
$(this)
.nextAll(".output:first")
.html(data.value.toFixed(2));
});
</script>
答案 0 :(得分:1)
我希望这会有所帮助。
<input id="slider-2" type="text" data-slider="true" data-slider-range="1,99">
<input id="slider-1" type="text" value="99" data-slider="true" data-slider-range="1,99">
var total = 100;
$("#slider-1").bind("slider:changed", function (event, data) {
$('#slider-2').simpleSlider("setValue", total - data.value);
console.log(event);
});
$("#slider-2").bind("slider:changed", function (event, data) {
$('#slider-1').simpleSlider("setValue", total - data.value);
});