幅広い値のレンジスライダーを追加します。これは 0 ～ 100 の数値に設定されています。2 種類のスライダーがあります。nouiSlider は弊社が改良したサードパーティのプラグインです。noUiSlider を使用するには、nouislider.css と nouislider.js ファイルを手動で extras フォルダー内のリンクに追加する必要があります。

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>