Блог

Главная - Вопросы по программированию - Как мне сделать жидкий ползунок диапазона?

Как мне сделать жидкий ползунок диапазона?

#javascript #html #css

#javascript #HTML #css

Вопрос:

У меня есть ползунок с 3 значениями, и я пытаюсь добавить эффект сглаживания / текучести при перемещении вкладки из одного значения в другое.

Вот то, что, как я думал, сработает:

HTML

 <input type="range" min="1" max="3" value="1" class="slider">

CSS

 .slider {
  display: inherit;
}

.slider::-webkit-slider-thumb {
  transition: all ease-in-out 0.05s
}

.slider::-moz-range-thumb {
  transition: all ease-in-out 0.05s
}

https://jsfiddle.net/pcoledesign/5f1k4xLt/6/

Комментарии:

1. Для этого вам понадобится пользовательское решение JS. Входные данные HTML не имеют большого количества вариантов оформления и определенно не будут принимать переходы CSS.

2. Какой фреймворк вы используете? jQuery? Угловой? Я хочу дать соответствующий ответ. Я могу поделиться с вами также на Javascript.

3. Я использую jQuery

Ответ №1:

что вы можете сделать, так это попытаться присвоить step input элементу атрибут. и используйте Math.round() для получения значения, если вам нужны только значения 1,2,3