在某个范围取值时可以使用范围滑块。这个被设置为一个介于0和100之间的数字。们有两种不同类型的滑块。nouiSlider是我们修改过的第三方插件。要使用noUiSlider,，您必须手动引入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的Range

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