为具有宽范围的值添加范围滑块。此滑块设置为 0 到 100 之间的数字。我们有两种不同类型的滑块。nouiSlider 是我们已修改的第三方插件。要使用 noUiSlider，您必须手动链接位于 extras 文件夹中的 nouislider.css 和 nouislider.js 文件。

noUiSlider

请参阅 noUiSlider 的官方文档 此处 以查看各种滑块选项

 

  <div id="test-slider"></div>
        

  var slider = document.getElementById('test-slider');
  noUiSlider.create(slider, {
   start: [20, 80],
   connect: true,
   step: 1,
   orientation: 'horizontal', // 'horizontal' or 'vertical'
   range: {
     'min': 0,
     'max': 100
   },
   format: wNumb({
     decimals: 0
   })
  });
        

HTML5 范围

  <form action="#">
    <p class="range-field">
      <input type="range" id="test5" min="0" max="100" />
    </p>
  </form>