Слайдер диапазона не работает должным образом с метками

Question

Я создал слайдер с ползунком ионного диапазона, он работает хорошо, но не ожидал.

пожалуйста, смотрите скрипку здесь:

[jsfiddle]: https://jsfiddle.net/rudratosh/7wg1p86e/3/
https://jsfiddle.net/rudratosh/7wg1p86e/3/

Я пытаюсь создать что-то похожее на слайдер. перейдите по ссылке:

[ref]: (https://www.jamesallen.com/loose-diamonds/all-diamonds/)
https://www.jamesallen.com/loose-diamonds/all-diamonds/

, что я не могу сделать, это когда я нажимаю на строку и текст, он не скользит должным образом. пожалуйста, смотрите обе ссылки. Также пробовал с несколькими слайдерами, как Noui Slider и другие, но ничего не получалось.

, если кто-то может изменить текущую скрипку или предложить другой код, будет признателен.

Answer 1

Просто добавьте это CSS в вашу скрипку и отметьте ..

.irs--round .irs-line {
  height: 31px;
  background-color: transparent;
}

.irs--round .irs-line:after {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background-color: #dee4ec;
  z-index: 0;
}