スライダー

スライダーの実装にはnouislider.jsを利用しています。用意されているオプションや設定方法に関する詳しい情報は、プラグインのリソースを参照してください。

スライダーを設置する場所に、下記の通りマークアップします。

<div class="form-group">
  <span class="label-additional">ラベル</span>
  <div id="slider" class="ui-slider"></div>
</div>

横型

#slider_horizontal

JavaScriptを追加します。ハンドルの初期位置："start"、ハンドルの初期位置："start"を設定してください。セグメントを表示する場合はsegments: trueを設定します。（表示しない場合はfalseを設定）

const slider = document.getElementById('slider');
noUiSlider.create(slider, {
  start: 2,
  step:1,
  segments: true,
  range: {
    'min': 0,
    'max': 6,
  },
});
レンジ
#slider_range

レンジスライダーを実装するには、ハンドルの初期位置："start"に複数の値を設定します。ハンドルとハンドルをつなぐバーを表示させたい場合は、connect:trueを設定します。

const slider = document.getElementById('slider');
noUiSlider.create(slider, {
  start: [2, 4],
  connect: true,
  step:1,
  segments: true,
  range: {
    'min': 0,
    'max': 10,
  },
});
レンジ 上限固定
#slider_range_max

disable: 'max'を指定します

const slider = document.getElementById('slider');
noUiSlider.create(slider, {
  start: [0, 3],
  connect: true,
  step:1,
  disable: 'max',
  orientation: 'vertical',
  segments: true,
  range: {
    'min': 0,
    'max': 5,
  },
});
レンジ 下限固定
#slider_range_min

disable: minを指定します

const slider = document.getElementById(&#039;slider&#039;);
noUiSlider.create(slider, {
  start: [0, 3],
  connect: true,
  step:1,
  disable: 'min',
  segments: true,
  range: {
    'min': 0,
    'max': 10,
  },
});

縦型

#slider_vertical_range

orientation: verticalを指定します。

const vertical_slider = document.getElementById('vertical-slider');
noUiSlider.create(vertical_slider, {
  start: [0, 3],
  connect: true,
  step:1,
  // segments: true,
  orientation: 'vertical',
  segments: true,
  range: {
    'min': 0,
    'max': 5,
  },
});