Can anyone provide some insight on how I would be able to count the two slider ranges to act as one? If max range is 100 and user moves slider 1 to 30 then slider 2 should move to 70. The total value would always be what the range is. setting up the same class for both I assume will be needed, but I know its a lot more than that.
my setup http://testzone.me/ia/price.html
this is the jquery slider 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>
I hope this helps.
<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);
});