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

Question

[leni_m]

В браузерах -webkit- делаю разные цвета с помощью box-shadow к ползунку и overflow:hidden к инпуту, но ползунок больше инпута по высоте и обрезается.
Как тогда подходить к реализации такого ползунка? Неужели js подтягивать?

Answer 1

[Александр]

Вот хороший пример на чистом CSS - https://codepen.io/finnhvman/pen/LJWJVR

Comments

[leni_m]

там одинаковые цвета "до" и "после" ползунка.

[Александр]

leni_m, точно. Тогда никак :-)

[Александр]

leni_m, вот что говорят:

Internet Explorer позволяет стилизовать обе части слайдера между ползунком свойствами -ms-fill-lower и -ms-fill-upper, но браузеры на WebKit не предоставляют подобного функционала, поэтому потребуется использовать JavaScript.