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

Question

[Анита Ковалева]

Всем привет, подскажите пожалуйста как сверстать вот такой вот ползунок максимально кроссбраузерно?

Почитала спецификацию и начала стилизовать -

.range
    width: 288px
    height: 2px
    appearance: none
    background-color: #283645

.image-editor-crop input[type=range]::-webkit-slider-thumb           //Данный код не поддерживается
    appearance: none                                                                         // в браузере даже с префиксами

Плюс не нашла информацию насколько возможно использовать apperance - сам ползунок я свертала, но стилизовать кружок за который тянешь - не реагирует на стилизацию. В спецификации Moziila Dev сказано что это не особо поддерживаемая деректива и на can i use почему-то ее не нашла
В итоге пока получилось это -

Comments

[yarovikov]

Без js не выйдет, увы.

[WapSter]

Лучше всего использовать js и варьировать параметром value.

[sim3x]

Максимальная поддержка === ие4+ или ие6+?

[Анита Ковалева]

sim3x, нет, edge и uc браузер будет достаточно. Дело в том что даже с префиксами не работает в chrome и mozilla

[sim3x]

Анита Ковалева,
Укажите конкретные версии браузеров

[Анита Ковалева]

sim3x, Edge -17-18, Opera - 58, Mozilla - 65-68, Chrome - 72-76, Safari - 12,1-12.2

Answer 1

[Ragtime Kitty]

Тут недавно кто-то скидывал вот этот:


Mozilla, Chrome, Opera, Safari, Edge - во всех работает.

Answer 2

[Август Милович]

На самом деле, чтобы на счёт этого не болела голова, используйте autoprefixer. Чаще всего его устанавливают как плагин gulp.

Comments

[Анита Ковалева]

Он есть, автопрефиксер убирает apperance у инпута, но не у value - он остается под дефолту без стилей