带滑块和百分比显示的Jquery缩放

我正在为我和一些同事制作一个小项目，并在Jquery中制作一个范围滑块以显示在页面上，因为我们无法编辑实际的HTML页面。我制作了一个范围滑块，可以放大一个div，这样“-”或“+”按钮就可以放大和缩小。但滑块和关键点值不同步

HTML:

关于我
同侧眼睑

%
知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。但是，在最低限度上，我们需要一个实验室来进行日常工作。酒后驾车
如果你是一个不受欢迎的人，那么你就可以在一个不受欢迎的地方。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡

jQuery：
var计数器=$（“#点”）.值；
$（文档）.ready（函数（）{
变量输入=$（''{
id:'点数'，
键入：“范围”，
名称：“AMOUNTRAGE”，
民:1,，
最高：5，
价值：1，
步骤：1，
focusin:function（）{
$（this.val（“”）；
}
}).wrap（'.parent（）.appendTo（'.tryNow'）；
//缩放功能
$（“#点”）。关于（“更改”，函数（）{
$（“div.zoom”）.css({
“缩放”：$（this.val（）
});
});
$（“.zoom in”）。单击（函数（）{
var newValuePlus=parseInt（$（“#textnumber”）.val（））+1；
var newZoom=parseInt（$（'.zoom'））
如果（newValuePlus>5）返回；
$（“#点数，#文本编号”）.val（newValuePlus）；
});
$（“.zoom out”）。单击（函数（）{
var newValueMinus=parseInt（$（“#textnumber”）.val（））-1；
如果（新值减去<1）返回；
$（“#点，#文本编号”）.val（newvalue减号）；
});
$（“#点”）。更改（函数（）{
var newValue=Math.floor（$（this.val（））；
$（“#textnumber”）.val（新值）；
});
$（“#textnumber”）.change（函数（）{
var newValue=$（this.val（）；
$（“#点”）.val（新值）；
});
});

当您通过JS浏览器更改中的值时，不发送事件

您可以添加

.trigger（“更改”）

到所有

$（“#点，#文本编号”）.val（newValuePlus）

及其将起作用。 e、 g.

$（“#点，#文本编号”）.val（newValuePlus）.trigger（“更改”）

演示：

仅在输入字段失去焦点后，p.S.事件更改dispath。如果要在键入新数字时更改缩放值，请在（“输入”）和.trigger（“输入”）上使用$（“#textnumber”）

<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);

      });


    });