Anitamsk
@Anitamsk
Frontend Dev

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

Всем привет, подскажите пожалуйста как сверстать вот такой вот ползунок максимально кроссбраузерно?
5ca86a27b530e921861446.png
Почитала спецификацию и начала стилизовать -
.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 почему-то ее не нашла
В итоге пока получилось это -
5ca86b38d2e51923059696.png
  • Вопрос задан
  • 187 просмотров
Решения вопроса 1
Ragtime_Kitty
@Ragtime_Kitty
Тут недавно кто-то скидывал вот этот:


Mozilla, Chrome, Opera, Safari, Edge - во всех работает.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
CodeInMyHeart
@CodeInMyHeart
SOS
На самом деле, чтобы на счёт этого не болела голова, используйте autoprefixer. Чаще всего его устанавливают как плагин gulp.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы