Range css input: Styling range input with CSS and JavaScript for better UX

Если бы это было математическое уравнение:

ввод диапазона = дорожка + большой палец

Ввод диапазона иногда называют «ползунком», и в оставшейся части этой статьи я буду использовать эти термины взаимозаменяемо.

Несоответствия браузеров

Чтобы продемонстрировать, почему нам вообще нужно руководство по стилю ввода диапазона, мы рассмотрим несколько снимков экрана ввода диапазона HTML по умолчанию и того, как он отображается в четырех основных браузерах (Chrome , Firefox, Safari и Edge). Или, если хотите, вы можете просмотреть эту демонстрацию CodeSandbox в каждом из соответствующих браузеров, чтобы увидеть несоответствия браузеров во всей их красе.

Примечание: Эти снимки экрана были сделаны по состоянию на сентябрь 2021 года и могут быть изменены по мере обновления соответствующих браузеров.

Давайте начнем с Chrome, который, на мой взгляд, по умолчанию отображает наиболее удобную для пользователя версию ввода.

Firefox является следующим и выглядит иначе, чем ввод, отображаемый Chrome. В Firefox высота дорожки немного короче. С другой стороны, высота и ширина большого пальца больше и не имеют такого же синего цвета фона, как в версии для Chrome.

Слайдер Safari выглядит ближе всего к версии Firefox, но, опять же, он все еще отличается. На этот раз кажется, что дорожка имеет теневой эффект, а высота и ширина бегунка меньше, чем в версиях Chrome и Firefox. Если вы присмотритесь, вы также увидите, что большой палец не находится прямо по центру дорожки, что придает ей неполированный вид.

И последнее, но не менее важное — это Edge, который теперь, когда Microsoft Edge построен на основе Chromium, гораздо больше соответствует трем другим браузерам, чем его предшественник до Chromium. Однако мы видим, что он по-прежнему отображается иначе, чем в трех других браузерах. Представление Edge ввода диапазона очень похоже на версию Chrome, за исключением более темного серого цвета фона для большого пальца и левой стороны дорожки перед большим пальцем.

Теперь, когда мы увидели, насколько непоследовательно каждый браузер отображает ввод диапазона, мы посмотрим, как мы можем использовать CSS для их унификации.

Больше после прыжка! Продолжить чтение ниже ↓

Сброс диапазона (базовые стили)

Поскольку несоответствия браузеров сильно различаются, нам нужно начать с равных условий. Как только стили по умолчанию, применяемые каждым браузером, будут удалены, мы можем начать работать над тем, чтобы сделать ввод более унифицированным. Мы будем использовать input[type="range"] селектор атрибутов элемента и примененные здесь стили будут действовать как сброс CSS для ввода.

Чтобы применить базовые стили, нам нужны четыре свойства:

1. -webkit-appearance: none;
   Это свойство является префиксом поставщика, применимым ко всем основным браузерам. Присвоив ему значение none , это говорит каждому соответствующему браузеру очистить все стили по умолчанию. Это позволяет нам начать с нуля и построить внешний вид ввода с этой точки.
2. фон: прозрачный;
   Удаляет фон по умолчанию, который применяется к входу.
3. курсор: указатель;
4. ширина
   Устанавливает общую ширину ввода.

 ввод [тип = "диапазон"] {
  -webkit-внешний вид: нет;
  внешний вид: нет;
  фон: прозрачный;
  курсор: указатель;
  ширина: 15рем;
} 

Стилизация дорожки

При стилизации дорожки (и бегунка) нам нужно настроить таргетинг на префиксы конкретных поставщиков различных браузеров, чтобы применить надлежащие стили к соответствующему элементу. В будущем любой псевдоэлемент с префиксом -webkit будет применяться к браузерам Chrome, Safari, Opera и Edge (после Chromium). Все, что имеет префикс -moz , относится к Firefox.

Ниже приведены псевдоэлементы, которые мы будем использовать для нацеливания на трек:

• ::-webkit-slider-runnable-track
  Нацеливается на трек в Chrome, Safari и Edge Chromium.
• ::-moz-range-track
  Нацеливает на дорожку в Firefox.

 /***** Стили дорожек *****/
/***** Chrome, Safari, Opera и Edge Chromium *****/
input[type="range"]::-webkit-slider-runnable-track {
  фон: #053a5f;
  высота: 0,5бэр;
}
/******** Fire Fox ********/
input[type="range"]::-moz-range-track {
  фон: #053a5f;
  высота: 0,5бэр;
} 

Единственными обязательными свойствами трека являются высота и фон . Тем не менее, часто можно увидеть border-radius , применяемый для закругления краев.

Стилизация большого пальца

Стилизация большого пальца (средняя ручка, которую перемещает пользователь) имеет больше нюансов, которые необходимо учитывать, поскольку существует больше несоответствий между браузерами в этой части ввода диапазона.

Ниже приведены псевдоэлементы, которые мы будем использовать для нацеливания на большой палец:

• ::-webkit-slider-thumb
  Нацелены на большой палец в Chrome, Safari и Edge Chromium.
• ::-moz-range-thumb
  Нацеливает на большой палец в Firefox.

Поскольку браузеры Firefox и Webkit имеют разные проблемы со стилем, я рассмотрю каждую проблему отдельно и покажу, как справиться с каждым из причудливых значений по умолчанию, которые применяются к большому пальцу.

Chrome, Safari, Edge Chromium (Webkit)

Первый стиль, который нам нужно применить к псевдоэлементу

Как только стили по умолчанию будут удалены, мы сможем применить наши собственные стили. Предположим, мы применяем height , width и background-color для большого пальца, вот пример того, что у нас было до сих пор:

По умолчанию браузеры WebKit отображают бегунок так, что он не находится по центру дорожки.

Чтобы правильно центрировать бегунок на дорожке, мы можем использовать следующую формулу и применить ее к свойству margin-top :

margin-top = (высота дорожки в пикселях / 2) — (высота бегунка в пикселях /2)

Взяв стили, которые мы применили в предыдущих разделах, и конвертировав rems в пиксели, мы получили бы высоту дорожки 8px и высоту большого пальца 32px. Это будет означать, что:

margin-top = (8/2) — (32/2) = 4 — 16 = -12px

Исходя из этого, наши окончательные стили для браузеров webkit будут выглядеть как следующий блок кода:

 /***** Стили большого пальца *****/
/***** Chrome, Safari, Opera и Edge Chromium *****/
input[type="range"]::-webkit-slider-thumb {
   -webkit-внешний вид: нет; /* Переопределить внешний вид по умолчанию */
   внешний вид: нет;
   верхнее поле: -12px; /* Направляет бегунок по центру дорожки */
   цвет фона: #5cd5eb;
   высота: 2бэр;
   ширина: 1рем;
} 

Firefox

При применении стилей к бегунку в Firefox вам потребуется использовать псевдоэлемент ::-moz-range-thumb . К счастью, Firefox не страдает от той же проблемы с центрированием, что и браузеры Webkit. Тем не менее, есть одна проблема, связанная с радиусом границы по умолчанию и серой рамкой, которые применяются к большому пальцу.

Чтобы исправить серую рамку по умолчанию, мы можем добавить граница: нет; недвижимость. Чтобы удалить применяемый радиус границы по умолчанию, мы можем добавить свойство border-radius: 0 , и теперь бегунок будет выглядеть одинаково во всех браузерах.

Исходя из этого, наши окончательные стили для браузера Firefox будут выглядеть так:

 /***** Thumb Styles *****/
/***** Fire Fox *****/
input[type="range"]::-moz-range-thumb {
    граница: нет; /*Удаляет дополнительную границу, которую применяет FF*/
    радиус границы: 0; /*Удаляет радиус границы по умолчанию, который применяется FF*/
    цвет фона: #5cd5eb;
    высота: 2бэр;
    ширина: 1рем;
} 

Примечание: Браузеры Webkit не применяют автоматически этот радиус к границе, поэтому, если вы обнаружите, что хотите применить некоторую форму радиуса границы к большому пальцу, а не отменить его, как мы сделали выше, вам нужно будет применить желаемые размеры border-radius к псевдоэлементам -webkit-slider-thumb и ::-moz-range-thumb .

Стили фокуса

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

В соответствии с документацией WAI-ARIA: Slider рекомендуется следующее:

Фокус помещается на ползунок (визуальный объект, который перемещает пользователь мыши, также известный как большой палец).

Первое, что мы хотим сделать, это удалить стили фокуса по умолчанию, чтобы мы могли заменить их пользовательскими стилями. Чтобы ориентироваться на стили фокуса большого пальца, мы можем использовать псевдоэлементы ::-webkit-slider-thumb и ::-moz-range-thumb , которые мы использовали в предыдущем разделе, и объединить их с :focus псевдокласс. Затем мы можем использовать свойства CSS-контура и контура-смещения, чтобы стилизовать его так, как мы хотим.

 /***** Стили фокусировки *****/
/* Удаляет фокус по умолчанию */
ввод [тип = "диапазон"]: фокус {
  контур: нет;
}
/***** Chrome, Safari, Opera и Edge Chromium *****/
input[type="range"]:focus::-webkit-slider-thumb {
  граница: 1px сплошная #053a5f;
  контур: 3 пикселя сплошной #053a5f;
  смещение контура: 0,125 бэр;
}
/******** Fire Fox ********/
input[type="range"]:focus::-moz-range-thumb {
  граница: 1px сплошная #053a5f;
  контур: 3 пикселя сплошной #053a5f;
  смещение контура: 0,125 бэр;
} 

Примечание : Если к большому пальцу применен радиус границы , Firefox отображает контур в форме большого пальца , в то время как другие браузеры отображают блочный контур. К сожалению, для этого нет простого исправления CSS, и это единственное несоответствие, которое будет присутствовать. Тем не менее, основная цель добавления этих стилей заключается в обеспечении доступности, а основная цель, предоставление визуального индикатора, когда элемент находится в фокусе, по-прежнему достигается.

Собираем все вместе

Теперь, когда мы рассмотрели все стили, необходимые для унификации ввода диапазона, вот как будет выглядеть окончательная таблица стилей CSS:

 /********** Стили ввода диапазона **********/
/*Сброс диапазона*/
ввод[тип="диапазон"] {
   -webkit-внешний вид: нет;
    внешний вид: нет;
    фон: прозрачный;
    курсор: указатель;
    ширина: 15рем;
}
/* Удаляет фокус по умолчанию */
ввод [тип = "диапазон"]: фокус {
  контур: нет;
}
/**** Стили Chrome, Safari, Opera и Edge Chromium *****/
/* бегунок */
input[type="range"]::-webkit-slider-runnable-track {
   цвет фона: #053a5f;
   радиус границы: 0,5 бэр;
   высота: 0,5бэр;
}
/* бегунок ползунка */
input[type="range"]::-webkit-slider-thumb {
  -webkit-внешний вид: нет; /* Переопределить внешний вид по умолчанию */
   внешний вид: нет;
   верхнее поле: -12px; /* Направляет бегунок по центру дорожки */
   /*пользовательские стили*/
   цвет фона: #5cd5eb;
   высота: 2бэр;
   ширина: 1рем;
}
input[type="range"]:focus::-webkit-slider-thumb {
  граница: 1px сплошная #053a5f;
  контур: 3 пикселя сплошной #053a5f;
  смещение контура: 0,125 бэр;
}
/*********Стили Firefox ********/
/* бегунок */
input[type="range"]::-moz-range-track {
   цвет фона: #053a5f;
   радиус границы: 0,5 бэр;
   высота: 0,5бэр;
}
/* бегунок ползунка */
input[type="range"]::-moz-range-thumb {
   граница: нет; /*Удаляет дополнительную границу, которую применяет FF*/
   радиус границы: 0; /*Удаляет радиус границы по умолчанию, который применяется FF*/
   /*пользовательские стили*/
   цвет фона: #5cd5eb;
   высота: 2бэр;
   ширина: 1рем;
}
input[type="range"]:focus::-moz-range-thumb {
  граница: 1px сплошная #053a5f;
  контур: 3 пикселя сплошной #053a5f;
  смещение контура: 0,125 бэр;
}
 

Заключение

В дополнение к методам, описанным в статье, вы также можете воспользоваться созданным мной генератором CSS для ввода диапазона под названием range-input. css . Суть этого проекта заключалась в создании инструмента, упрощающего этот процесс для разработчиков. Генератор CSS позволяет быстро стилизовать общие свойства CSS и предоставляет демонстрационный ползунок, который отображает в режиме реального времени предварительный просмотр стилей, которые вы хотите применить.

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

Дополнительные ресурсы журнала Smashing Magazine

• Генераторы CSS
• Упрощение стилей форм с помощью Accent-Color
• Умные CSS-решения для решения общих задач пользовательского интерфейса CSS

Как стилизовать диапазон типов ввода в Chrome, Firefox и IE

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

Можно применять стили непосредственно к input[type=range]

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

Браузеры на базе Webkit (Chrome, Safari, Opera)

В браузерах на основе webkit стиль дорожки определяется специальным псевдоселектором ::-webkit-slider-runnable-track , а бегунок — ::webkit-slider-thumb .

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

 ввод [тип = диапазон] {
    -webkit-внешний вид: нет;
}
input[type=range]::-webkit-slider-runnable-track {
    ширина: 300 пикселей;
    высота: 5 пикселей;
    фон: #ддд;
    граница: нет;
    радиус границы: 3px;
}
input[type=range]::-webkit-slider-thumb {
    -webkit-внешний вид: нет;
    граница: нет;
    высота: 16 пикселей;
    ширина: 16 пикселей;
    радиус границы: 50%;
    фон: золотарник;
    верхнее поле: -4px;
}
ввод [тип = диапазон]: фокус {
    контур: нет;
}
input[type=range]:focus::-webkit-slider-runnable-track {
    фон: #ccc;
}
 

 ввод [тип = диапазон] {
    /* исправлена ​​ошибка, из-за которой FF не мог применить стиль фокуса */
    граница: 1px сплошной белый;
    /*требуется для правильного размера дорожки в FF*/
    ширина: 300 пикселей;
}
input[type=range]::-moz-range-track {
    ширина: 300 пикселей;
    высота: 5 пикселей;
    фон: #ддд;
    граница: нет;
    радиус границы: 3px;
}
input[type=range]::-moz-range-thumb {
    граница: нет;
    высота: 16 пикселей;
    ширина: 16 пикселей;
    радиус границы: 50%;
    фон: золотарник;
}
/*скрыть контур за границей*/
ввод[тип=диапазон]:-moz-focusring{
    контур: 1px сплошной белый;
    смещение контура: -1px;
}
input[type=range]:focus::-moz-range-track {
    фон: #ccc;
}