Jquery Zoom with slider and percentage display

Question

I am making a little project for me and some co-workers and making a range slider in Jquery to display on page as we are not able to edit the actual HTML page. I made a Range Slider that zooms in on an div and make it so that the "-" or "+" buttons will zoom in and out. But the slider and keys values are not synced.

HTML:

<section id="about">
    <div class="container">
      <h4 class="headers">About Me</h4>
      <div class="row">
        <div class="col-sm-2 tryNow">
          <p>Lorem ipsum</p>

          <input type="text" name="amountInput" id="textnumber" min="1" max="5" step="1" value="1" /><span>%</span>
          <input class="zoom-in" type="button" id="plus" value="+" />
          <input class="zoom-out" type="button" id="minus" value="-" />
        </div>
        <div class="col-lg-10 zoom">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
            aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>

      </div>
    </div>
  </section>


jQuery:

var counter = $("#points").value;
$(document).ready(function() {
  var input = $('<input>', {
    id: 'points',
    type: 'range',
    name: 'amountRange',
    min: 1,
    max: 5,
    value: 1,
    step: 1,
    focusin: function() {
      $(this).val('');
    }
  }).wrap('<div class="zoomContainer"></div>').parent().appendTo('.tryNow');

  // zoom function
  $("#points").on("change", function() {
    $("div.zoom").css({
      "zoom": $(this).val()
    });
  });


      $(".zoom-in").click(function() {

        var newValuePlus = parseInt($("#textnumber").val()) + 1;
        var newZoom = parseInt($('.zoom'))
        if (newValuePlus > 5) return;

        $("#points, #textnumber").val(newValuePlus);

      });


      $(".zoom-out").click(function() {

        var newValueMinus = parseInt($("#textnumber").val()) - 1;
        if (newValueMinus < 1) return;

        $("#points, #textnumber").val(newValueMinus);
      });

      $("#points").change(function() {

        var newValue = Math.floor($(this).val() );
        $("#textnumber").val(newValue);

      });

      $("#textnumber").change(function() {

        var newValue = $(this).val();
        $("#points").val(newValue);

      });


    });

Answer 1

When u change value in via JS browser not dispatch events

You can add .trigger("change"); to all $("#points, #textnumber").val(newValuePlus) and its will be work. e.g. $("#points, #textnumber").val(newValuePlus).trigger("change");

Demo: https://codepen.io/GTech1256/pen/gOYJOzO

P.S. event change dispath only after input field lose focus. If you want change zoom value when type new number, use $("#textnumber").on("input") and .trigger("input")