Инпут с ползунком Предыстория: Как сделать такой инпут, да еще задать ему стили? Стили, кроме того, должны быть кроссбраузерными. Очень часто его далают из стилизованых <span>, а функционал пишут на js. На самом деле это необязательно. Решение, input[type="range"] стилизация без js HTML: <input type="range" name="range" value="75" min="0" max="100" step="1" /> Существуют генераторы стилей для этого элемента — генератор ниже позволяет задать стили с префиксами(кроссбраузерность) для: ✔всего инпута: общую высоту и класс ✔track, trumb, progress: цвет, цвет границы, размер, цвета для состояний :hover и :active, в том числе градиент ✔другие параметры 🔗https://toughengineer.github.io/demo/slider-styler/slider-styler.html
Инпут с ползунком
Предыстория: Как сделать такой инпут, да еще задать ему стили? Стили, кроме того, должны быть кроссбраузерными. Очень часто его далают из стилизованых <span>, а функционал пишут на js. На самом деле это необязательно.
Решение, input[type="range"] стилизация без js
HTML:
<input type="range" name="range" value="75" min="0" max="100" step="1" />
Существуют генераторы стилей для этого элемента — генератор ниже позволяет задать стили с префиксами(кроссбраузерность) для:
✔всего инпута: общую высоту и класс
✔track, trumb, progress: цвет, цвет границы, размер, цвета для состояний :hover и :active, в том числе градиент
✔другие параметры
🔗https://toughengineer.github.io/demo/slider-styler/slider-styler.html