Using jquery to listen for change to multiple sliders

Question

I am trying to find a more efficient way to write my code. I have a lesson where students can move sliders to view equivalent fractions. The code can be found on this codepen . I was hoping to use just one function so when any one of the three sliders are changed, the fraction will change also. I have tried,

const ranges = document.querySelectorAll(".range");

console.log("#"+ranges[0].id)

$("#"+ranges[0].id, "#"+ranges[1].id, "#"+ranges[2].id).change(function () {

    console.log (ranges)
    console.log (ranges[0].value)
    console.log (ranges[0].id + "Bubbles")
        
    setBubble(ranges[0].value * 1, ranges[0].id + "Bubble");
    equivalentFraction (ranges[0].value, ranges[1].value, ranges[2].value);

});

setBubble(range, rangeBubble);
equivalentFraction (ranges[0].value, ranges[1].value, ranges[2].value);

However, the values in the bubbles do not show and the values in the fractions do not update. I am not sure what I am doing incorrectly and would appreciate your help.

Answer 1

Consider the following.

 $(function() { function setBubble(rangeEl, bubbleEl) { var val = parseInt(rangeEl.value); var min = rangeEl.min? parseInt(rangeEl.min): 0; var max = rangeEl.max? parseInt(rangeEl.max): 100; var result = ((val - min) * 100) / (max - min); $(bubbleEl).html(rangeEl.value).css("left", "calc(" + result + "% + " + ((8 - result) * 0.15) + "px)"); } function writeEquation(inpObj, targetObj) { targetObj.html(""); var equation = $("<span>", { class: "frac" }).appendTo(targetObj); $("<sup>").html(inpObj.numerator + " &times; " + inpObj.factor).appendTo(equation); $("<span>").html("/").appendTo(equation); $("<sub>").html(inpObj.denominator + " &times; " + inpObj.factor).appendTo(equation); $("<span>", { class: "eq" }).html("=").appendTo(targetObj); var result = $("<span>", { class: "frac" }).appendTo(targetObj); $("<sup>").html(inpObj.numerator * inpObj.factor).appendTo(result); $("<span>").html("/").appendTo(result); $("<sub>").html(inpObj.denominator * inpObj.factor).appendTo(result); } function getValues() { return { numerator: parseInt($("#numeratorEquivalentSlider").val()), denominator: parseInt($("#denominatorEquivalentSlider").val()), factor: parseInt($("#equivalentSlider").val()) }; } $("div[class*='EquivalentFractionSlider']").each(function(index, elem) { setBubble($(".range", elem).get(0), $(".bubble", elem).get(0)); }); $(".range").on("input", function() { setBubble($(this).get(0), $(this).parent().find(".bubble").get(0)); }).change(function() { var inp = getValues(); if (inp.denominator == 0) { $("#equivalentErrorStatement").html("Sorry, Denominator cannot be 0.").addClass("errorComment"); return false; } if (inp.factor == 0) { $("#equivalentErrorStatement").html("Sorry, Factor cannot be 0. This would cause Denominitor to be 0.").addClass("errorComment"); return false; } writeEquation(inp, $("#equivalentFractionStatement")); }); });

 .bubble { background: red; color: white; padding: 4px 12px; margin: 0 auto 3rem; position: absolute; border-radius: 4px; transform: translate(-50%, 70%) }.bubble::after { content: ""; position: absolute; width: 2px; height: 2px; background: red; top: -1px; left: 50%; }.emphasisBox { border-radius: 25px; border: 5px solid hsl(245, 98%, 19%); background-color: hsl(210, 86%, 86%); border-width: 5px; box-shadow: 5px 10px hsl(205, 48%, 69%); padding: 3rem; } /* the following rules are used to write fractions */ span.frac { display: inline-block; text-align: center; } span.frac>sup { display: block; border-bottom: 1px solid; font: inherit; } span.frac>span { display: none; } span.frac>sub { display: block; font: inherit; } span.eq { vertical-align: 16px; padding: .25em; }

 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="container"> <div class="row justify-content-center mt-3"> <div class="col-8 col-md-5"> <div class="row justify-content-center"> <div class="col-10 col-md-6">Numerator</div> <div class="col-10 col-md-4"> <div class="numeratorEquivalentFractionSlider"> <input id="numeratorEquivalentSlider" type="range" class="range" min="-20" value="10" max="20"> <output id="numeratorEquivalentBubble" class="bubble"></output> </div> </div> </div> </div> <div class="col-8 col-md-5"> <div class="row justify-content-center"> <div class="col-10 col-md-7">Denominator</div> <div class="col-10 col-md-4"> <div class="denominatorEquivalentFractionSlider"> <input id="denominatorEquivalentSlider" type="range" class="range" min="-20" value="2" max="20"> <output id="denominatorEquivalentBubble" class="bubble"></output> </div> </div> </div> </div> </div> <div class="row justify-content-center mt-3"> <div class="col-8 col-md-5"> <div class="row justify-content-center"> <div class="col-10 col-md-4">Factor</div> <div class="col-10 col-md-4"> <div class="EquivalentFractionSlider"> <input id="equivalentSlider" type="range" class="range" min="-20" value="5" max="20"> <output id="equivalentBubble" class="bubble"></output> </div> </div> </div> </div> </div> <div class="row justify-content-center align-items-center"> <;-- blank row to create space between card and banner --> <section class="col">&nbsp;</section> </div> <div class="row justify-content-center text-center"> <div id="equivalentErrorStatement" class="col-10 col-6"></div> </div> <div class="row justify-content-center my-3 text-center"> <div id="equivalentFractionStatement" class="col-8 col-md-4 emphasisBox"></div> </div> </div>

I have presented a jQuery answer, as I try not to mix. You cna see here, I have setup a few more functions:

• setBubble()
• getValues()
• writeEquation()

setBubble() accepts a Range Element and a target Bubble element. I suspect you will have the one bubble element, yet if you ever have more in the future, this is then can be carried over. It will gather the value from the range and set it in the bubble and then position the bubble on the screen.

getValues() will collect the values from each of the sliders and place them into a single Object that has numerator , denominator and factor elements. It does not do any error checking, it just gets the values.

writeEquation() accepts an Object that should contain numerator , denominator and factor and writes the equation to the specific target jQuery Object. It does not perform any error checking.

You will also see that once the User has selected a value, we perform checks to see if these would cause an issue issue. If the values would cause an issue, a Error is shown and the function is exited ( return false; ). Otherwise the values are used and written out as the equation.