<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://s3.amazonaws.com/so-answers/jquery.range.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://s3.amazonaws.com/so-answers/jquery.range-modified.js"></script>
<script>
</script>
<style>
#quant1 { pointer-events: none; }
</style>
</head>
<body>
<div id="foo1" style="height: 100px; width: 100%;" ></div>
<input type="hidden" id="quant1" value="0" />
<div id="foo1" style="height: 100px; width: 100%;" ></div>
<input type="hidden" id="quant2" value="0" />
<div id="foo2" style="height: 100px; width: 100%;" ></div>
<input type="hidden" id="quant3" value="0" />
<div id="foo3" style="height: 100px; width: 100%;" ></div>
<div id="totalRemaining">100 </div>
<script >
var maxVal=100;
$_slider1= $("#quant1");
$_slider1.find('.ui-slider-handle');
$_slider2= $("#quant2");
// With JQuery
$('#quant1').jRange(
{
from: 0.0,
to: 100.0,
step: 1,
scale: [0,25,50,75,100],
format: '%s',
width: 300,
showLabels: true,
snap: true,
id: "thisisanid",
slide:function(){console.log("sliding")},
ondragend: function(){ console.log("ondragend");
var reduceSliderVal= reduceSlider($_slider1, $_slider2);// returns the appropriate slider value or returns false if no adjustement is needed.
if (reduceSliderVal){$_slider1.jRange('setValue', ""+reduceSliderVal);}
}
}).change(function(){
console.log("change");
var reduceSliderVal= reduceSlider($_slider1, $_slider2);// returns the appropriate slider value or returns false if no adjustement is needed.
if (reduceSliderVal){ $_slider1.jRange('setValue', ""+reduceSliderVal);}
setTimeout(function(){
console.log("slider 1 timeout onchange");
var reduceSliderVal= reduceSlider($_slider1, $_slider2);// returns the appropriate slider value or returns false if no adjustement is needed.
if (reduceSliderVal){ $_slider1.jRange('setValue', ""+reduceSliderVal);}
}, 3000);
//reduces the current slider val if needed
$_slider1.trigger("ondragend");
console.log("onchange slider1", reduceSliderVal);
console.log("after");
}).on('input mousedown mouseup touchstart click change ondrag', function (e) {
console.log("triggering dragend slider1");
$_slider1.trigger("ondragend");
});
$('#quant2').jRange({
from: 0,
to: 100,
step: 1,
scale: [0,25,50,75,100],
format: '%s',
width: 300,
showLabels: true,
ondragend: function(){
var reduceSliderVal= reduceSlider($_slider2, $_slider1);// returns the appropriate slider value or returns false if no adjustement is needed.
if (reduceSliderVal){$_slider2.jRange('setValue', ""+reduceSliderVal);}
}
}).change(function(){
var reduceSliderVal= reduceSlider($_slider2, $_slider1);// returns the appropriate slider value or returns false if no adjustement is needed.
if (reduceSliderVal){ $_slider2.jRange('setValue', ""+reduceSliderVal);} //reduces the current slider val if needed
});
function reduceSlider(currentSlider, otherSlider, otherSlider2)
{ // if the slider value of the just-moved slider is too high, reduce it to the appropriate amount
var negativeExcess= maxVal - ( parseInt(currentSlider.val() ) + parseInt(otherSlider.val() ) );
if (negativeExcess < 0)
{
console.log("excess calculated", negativeExcess);
console.log("returning ", (maxVal - parseInt( otherSlider.val() ) ) );
return (maxVal - parseInt(otherSlider.val()) ); //calculate remainder without involving the current slider since the user may drag the current slider too far beyond the max value, resulting in the current slider being set backwards too far.
}else{
return false;
}
}
</script>
</body>
</html>