Стилизуем слайдер input range для всех популярных браузеров

[Evengard]

Сразу скажу, что как минимум на Firefox не работает рамочка, появляющаяся при использовании Tab-а.

[sunbeam]

не только в firefox, в chrome и edge тоже не наблюдается, да и в стилях не видно навскидку

[toughengineer]

outline при фокусе отключён вот этим кодэ почти в самом начале CSS:

input[type=range].styled-slider:focus {
  outline: none;
}

Так сделано потому что в Chromium в общем случае outline выглядит убого:

Как решить эту проблему я так и не придумал.

[sunbeam]

на самом деле я просто прокомментировал коммент выше) уже стало привычными, что большинство кастомных компонентов не меняются визуально при :active :focus, и не так и часто на это обращаешь внимание. в основном те, кому привычно табом переключаться по ссылкам.
может как-то так обозначить на фокус.
input[type=range].styled-slider:focus { box-shadow: 0px 0px 4px #2f98f9; } цвет тени, так же как у слайдера по умолчанию взял. а черная обводка выше, это так у меня хром по умолчанию отображает фокус на этом элементе.

или может добавить тень с помощью before или after, и отодвинуть её на пиксель во все стороны от элемента, чтобы получится визуальный зазор между тенью и самим слайдером.

[toughengineer]

Я ответил обоим сразу.

Я не стал делать какое либо решение типа теней, ибо тогда в разных браузерах фокус будет показываться по-разному неконсистентно для разных элементов, что не комильфо.

Неопытным разработчикам будет пофиг на отсутствие отображения фокуса и я считаю это маленькой ценой за отсутствие неожиданной разницы в отображении фокуса.

Опытные разработчики смогут сами принять решение, например, сделают отображение фокуса консистентно с другими элементами на странице.

[toughengineer]

Прости.

[Carduelis]

Неопытным разработчикам будет пофиг на отсутствие отображения фокуса и я считаю это маленькой ценой за отсутствие неожиданной разницы в отображении фокуса.

Они научатся тому, как делать неправильно.

[Evengard]

В Firefox outline кстати вполне нормальный. Хром вообще с аутлайнами учудил в последних апдейтах, сделав их чёрными и странными...

[toughengineer]

оказывается Safari 14 (Big Sur) так же чудит

если в настройках включить эту галочку

[kiaplayer]

Ни разу не встречал удобного применения этого элемента управления.

Обычно вижу его в фильтрах интернет-магазинов, где всегда удобнее ввести цифры, чем ловить пиксели этой штукой :)

[Tsimur_S]

Вопрос привычки, если вам не важны точные значения то проще крутануть слайдер на приблизительное, не отрывая руку от мышки/тачпада

[CoolCmd]

а как же громкость?

[Evengard]

Он на самом деле может быть неплох, когда выбирать нужно из 5-6 позиций, не больше (а лучше меньше). В чём-то может даже лучше дропдауна. Для больше чем 6 позиций он уже неудобен ИМО.

Хотя даже тогда его можно заменить радиобаттонами, что может быть даже удобней...