Как вместо горизонтального скролла использовать слайдер?
 

Всем привет. Подскажите, пожалуйста, как решить следующую задачу.
Есть следующая разметка.

<ul class="list">
  <li class="list__item">1</li>
  <li class="list__item">2</li>
  <li class="list__item">1</li>
  <li class="list__item">2</li>
  <li class="list__item">1</li>
  <li class="list__item">2</li>
  <li class="list__item">1</li>
  <li class="list__item">2</li>
  <li class="list__item">1</li>
  <li class="list__item">2</li>
  <li class="list__item">1</li>
  <li class="list__item">2</li>
  <li class="list__item">1</li>
  <li class="list__item">2</li>
  <li class="list__item">1</li>
  <li class="list__item">2</li>
  <li class="list__item">1</li>
  <li class="list__item">2</li>
  <li class="list__item">1</li>
  <li class="list__item">2</li>
  <li class="list__item">1</li>
  <li class="list__item">2</li>
  <li class="list__item">1</li>
  <li class="list__item">2</li>
  <li class="list__item">1</li>
  <li class="list__item">2</li>
  <li class="list__item">1</li>
  <li class="list__item">2</li>
  <li class="list__item">1</li>
  <li class="list__item">2</li>
  <li class="list__item">1</li>
  <li class="list__item">2</li>
</ul>

.list {
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
}

.list__item {
  display: inline-block;
  width: 300px;
  height: 300px;
  margin: 10px;
  background: #e88565;
}

Идея в том, чтобы можно было использовать горизонтальную прокрутку, но не нативным скроллом, а слайдером, например вот этим:
https://refreshless.com/nouislider/
Могли бы вы мне подсказать как правильно реализовать данную задачу?

:-?

Спасибо

В IE11 данное решение не работает?

s24344,
работает