How to set output targets with multiple sets of .on() input sliders using JQuery?

Question

I have two sets of input sliders where each set has a target div. I am trying to keep the code as flexible as possible to accommodate for additional sets of sliders.

The issue I am having is that the following code is working perfectly only when adjusting the first set of inputs and target...it fails for the second set and respective target.

Checking the console I noticed that all the input value information and correct targets are being logged, and it seems to only apply one initial input change but then stops.

 $(".slider").on("input", function() { var wght = $(".weightSlider").val(); var opsz = $(".opticalSlider").val(); var settings = "'wght' " + wght + ",'opsz' " + opsz; var target = $(this).closest("article").siblings(".target") $(target).css("font-variation-settings", settings); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <section> <article> <div class="controls"> <label for="name">Font-size:</label> <input class="slider sizeSlider" type="range" min="10" max="200" value="48"> <label for="name">Weight:</label> <input class="slider weightSlider test" type="range" min="0" max="1000" value="0"> <label for="name">Optical Size:</label> <input class="slider opticalSlider" type="range" min="0" max="100" value="0"> </div> </article> <div class="target"></div> </section> <section> <article> <div class="controls"> <label for="name">Font-size:</label> <input class="slider sizeSlider" type="range" min="10" max="200" value="48"> <label for="name">Weight:</label> <input class="slider weightSlider test" type="range" min="0" max="1000" value="0"> <label for="name">Optical Size:</label> <input class="slider opticalSlider" type="range" min="0" max="100" value="0"> </div> </article> <div class="target"></div> </section>

I am thinking it is an issue of how I am selecting the target using .closest() and .siblings()...but what I don't understand is that is works for the first target but not the other.

It may also be an issue with .val() not setting the new input values.

Any idea what where the issue could be?

Answer 1

i have fixed your code.

 $(".slider").on("input", function() { var wght = $(this).closest(".controls").find(".weightSlider").val(); var opsz = $(this).closest(".controls").find(".opticalSlider").val(); var settings = "'wght' " + wght + ",'opsz' " + opsz; var target = $(this).closest("section").find(".target") $(target).css("font-variation-settings", settings); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <section> <article> <div class="controls"> <label for="name">Font-size:</label> <input class="slider sizeSlider" type="range" min="10" max="200" value="48"> <label for="name">Weight:</label> <input id="weightSlider" class="slider weightSlider test" type="range" min="0" max="1000" value="0"> <label for="name">Optical Size:</label> <input id="opticalSlider" class="slider opticalSlider" type="range" min="0" max="100" value="0"> <span class="slider-value"></span> </div> </article> <div class="target"></div> </section> <section> <article> <div class="controls"> <label for="name">Font-size:</label> <input class="slider sizeSlider" type="range" min="10" max="200" value="48"> <label for="name">Weight:</label> <input class="slider weightSlider test" type="range" min="0" max="1000" value="0"> <label for="name">Optical Size:</label> <input class="slider opticalSlider" type="range" min="0" max="100" value="0"> </div> </article> <div class="target"></div> </section>

Answer 2

Those variables

  var wght = $(".weightSlider").val();
  var opsz = $(".opticalSlider").val();

are returning you the values of the first line of inputs. You can use this instead:

    $(".slider").on("input", function() {

      var wght = $(this).val();
      var opsz = $(this).val();
      var settings = "'wght' " + wght + ",'opsz' " + opsz;

      var target = $(this).closest("article").siblings(".target");
      $(target).css("font-variation-settings", settings);
    });