My current project involves creating a page that features two sliders for user interaction. Users select values using these sliders, which are then displayed by the script. Additionally, the script calculates the product of the two values along with some factors and displays them. The coding seemed simple enough until an issue arose when I implemented the class="ms-slider". Without it, the formatting suffers, but including it disrupts the functionality of the script.
<form method="post" action="#">
//Slider #1
<input type="range" class="ms-slider" name="viewers" id="value1" value="0" min="0" max="200000" step='1000' data-highlight="true" onchange="calc" data-slider-ticks="[0, 100000, 200000]" data-slider-ticks-snap-bounds="3" data-slider-value="10000" data-slider-ticks-labels='["0", "100,000", "200,000"]'/>
//Slider #2
<input type="range" class="ms-slider" name="price" id="value2" value="0" min="0" max="16" step='1' data-highlight="true" onchange="calc" data-slider-ticks="[0, 8, 16]" data-slider-ticks-snap-bounds="3" data-slider-value="8" data-slider-ticks-labels='["$0", "$8", "$16"]'/>
//output fields - displays slider values
<input type="text" id="value11" name="value11"/>
<input type="text" id="value21" name="value21"/>
//output fields - display the multiplied values
<input type="text" id="total1" name="total1"/>
<input type="text" id="total2" name="total2"/>
</form>
<script>
// On any change in form.
$("form :input").change(function() {
// Fetch selected options.
var value1 = $('form #value1').val();
var value2 = $('form #value2').val();
// Display values in text field.
$('form #value11').val((value1));
$('form #value21').val((value2));
$('form #total1').val((value1 * value2) * 0.01);
$('form #total2').val((value1 * value2) * 0.05);
});
</script>