Javascript 带幻灯片更改的引导滑块链接输入编号

我正在使用

bootstrap slider.js

。我的问题是我无法将输入号码与幻灯片链接。如果输入的数字改变了，我也希望幻灯片也改变

滑块

<div id="slider-year" class="search-block">
  <h2 class="title">Production year</h2>
  <div class="slider-year-amount">
    <span class="pull-left">1900</span>
    <span class="pull-right">2017</span>
  </div>
  <input type="text" class="year-slider" style="width:100%" data-slider-min="1900" data-slider-max="2017" data-slider-step="1" data-slider-value="[1900,2017]" />
  <div class="row">
    <div class="year-box">
      <div class="col-lg-6">
        <label>From</label>
        <input type="number" min="1900" max="2019" class="form-control" placeholder="1900" id="minYear" value="1900" name="year_since">
      </div>
      <div class="col-lg-6">
        <label>To</label>
        <input type="number" min="1901" max="2020" class="form-control" placeholder="2017" id="maxYear" value="2017" name="year_to">
      </div>
    </div>
  </div>
</div>

这里还有这个滑块的文档，如果有人好奇，我在那里找不到解决方案：

http://www.eyecon.ro/bootstrap-slider

JSFIDLE:

您想要这样吗

    $("#minYear").change(function() {
      $("#slider-year").slider('setValue', jQuery(this).val());
    });

    val = $('.year-slider').slider();

    $('.year-slider').on('slide', function(ev) {
      $('#minYear').val(ev.value[0]);
      $('#maxYear').val(ev.value[1]);
    });

---

许多年过去了。。。无论如何，我的解决方案如下：

$('#year-slider').slider()
  .on('slide', function(ev) {
    $('#minYear').val(ev.value[0]);
    $('#maxYear').val(ev.value[1]);
  });

$('.form-control').on('input', function() {
  let minVal = parseInt($('#minYear').val());
  let maxVal = parseInt($('#maxYear').val());
  $('#year-slider').slider('setValue', [minVal, maxVal])
});

---

提供JSFIDLEexample@AnkurBhadania我已经创建了这个js提琴：但它无法让脚本工作，在我的页面上，一切都很顺利，滑块也出现了。脚本似乎无法运行，因为无法选择

slider

类。在JSFIDELADED中添加slider js，谢谢，现在它与我的页面上完全相同，在输入字段中设置值后，它会导致出现new slider@AnkurBhadania您的小提琴无法运行。控制台中出现错误。类似于此，但您的js代码段正在上一个滑块的上方创建另一个滑块，这导致多个滑块相互重叠。我需要更新上一个，以便范围也更新@水平

$('#year-slider').slider()
  .on('slide', function(ev) {
    $('#minYear').val(ev.value[0]);
    $('#maxYear').val(ev.value[1]);
  });

$('.form-control').on('input', function() {
  let minVal = parseInt($('#minYear').val());
  let maxVal = parseInt($('#maxYear').val());
  $('#year-slider').slider('setValue', [minVal, maxVal])
});