@ligisayan

Как сделать input[type=“range”] кроссбраузерным (обрезается ползунок по краям в edge)?

Есть ползунок range, отображение которого хочу сделать кроссбраузерным, но не получается это сделать в браузере edge. Ползунок почему-то обрезается сверху и снизу, а здесь нет.

Вот так ползунки выглядят в edge
5b740f0f91918097599314.png
Код:
  • Вопрос задан
  • 2287 просмотров
Решения вопроса 2
delphinpro
@delphinpro Куратор тега CSS
frontend developer
Не получится, скорее всего.
Используйте кастомные решения. Отличный ползунок — ionden.com/a/plugins/ion.rangeSlider/index.html
Ответ написан
Комментировать
@Alex_Nzr
input[type="range"]::-webkit-slider-thumb - это сам ползунок.
input[type="range"]::-webkit-slider-runnable-track - это полоса, по которой он ездит.
input[type=range] - это контейнер для thumb и track.

Срезание краёв происходит, когда высота контейнера меньше высоты ползунка. Другие браузеры это игнорируют и отображают нормально. Но Edge - особенный и любит индивидуальный подход.

И, что самое интересное, если подойти к стилизации данного инпута по схеме описанной выше, то она будет нормально работать в Edge, но не в других браузерах)) Например Яндекс.браузер не любит отдельную стилизацию track и если высота у контейнера и полосы различаются, то он приклеивает её к "потолку" контейнера и ползунок, соответственно, съезжает вниз. Это можно поправить поигравшись с padding, но тогда станет кривым отображение в Edge.
В общем, я обычно пишу в общий css файл стили ползунка для нормальных браузеров, а через js делаю проверку браузера клиента и, если это Edge, то подгружаю дополнительные стили для него.
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
sharomet
@sharomet
Front-End
Измените стили именно для edge
input[type=range]::-ms-thumb {
  height: 22px;
}
Ответ написан
Ваш ответ на вопрос

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

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