<div class="container">
  <div id="slider"></div>
</div>

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

.container {
  max-width: 500px;
  margin: 4rem 2rem 4rem;
}

const slider = document.getElementById('slider');
const valueElement = document.getElementById('slider-value');

 noUiSlider.create(slider, {
  start: [20, 80],  // 初期の範囲値
  connect: true,    // 範囲を色付きのバーで結ぶ
  range: {
    'min': 0,
    'max': 100
  },
  tooltips: true,  // ハンドル上にツールチップを表示
  pips: {  // 特定の間隔で値のマーカーを追加
    mode: 'positions',
    values: [0, 25, 50, 75, 100],
    density: 4
  }
});

// 範囲値を表示するテキスト要素を更新
slider.noUiSlider.on('update', function (values, handle) {
  valueElement.innerHTML = values.join(' - ');
});

console.log(noUiSlider)