Как сделать слайдер в html: Как сделать слайдер в HTML на своем сайте: краткая инструкция

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

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

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

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

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

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

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

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

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

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

Теперь, когда мы увидели, насколько непоследовательно каждый браузер отображает ввод диапазона, мы посмотрим, как мы можем использовать 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)

Первый стиль, который нам нужно применить к псевдоэлементу ::-webkit-slider-thumb , — это -webkit-appearance: none; Префикс поставщика

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

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

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

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 псевдокласс.

 /***** Стили фокусировки *****/
/* Удаляет фокус по умолчанию */
ввод [тип = "диапазон"]: фокус {
  контур: нет;
}
/***** 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
• Упрощение стилей форм с помощью акцентного цвета
• Интеллектуальные CSS-решения для распространенных задач пользовательского интерфейса
• Глубокое погружение в объект -подходят И фон-размер В CSS

Как сделать ползунок диапазона

Назад Далее

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

Примеры

Исследование

Профессиональные примеры

Приведенные ниже примеры обычно применяются в дизайне веб-сайтов в Интернете. Код доступен для вас и предлагает вам возможность чтобы отредактировать его на свое собственное творение!

Ползунок диапазона CSS

Эффект: профессиональный

HTML СКСС JS

См. Ползунок диапазона Pen CSS от Шона Стопника (@seanstopnik) на CodePen.

Ползунок диапазона пользовательского интерфейса

Эффект: базовый

HTML СКСС

См. слайдер диапазона Pen UI от Abe (@thehonestape) на CodePen.

Ползунок диапазона пользовательского интерфейса jQuery с плавающими и объединенными значениями в точке перекрытия.

Эффект: профессиональный

HTML CSS JS

См. перо Ползунок диапазона пользовательского интерфейса jQuery с плавающими и объединенными значениями в точке перекрытия. к Игнатий Никулин (@ignaty) на CodePen.

Калькулятор веса Slider Range Mars

Эффект: причудливый

HTML СКСС JS

См. калькулятор веса Pen Slider Range Mars от Marine Piette (@mayuMPH) на CodePen.

Слайдеры Material Design

Эффект: профессиональный

HTML СКСС JS

См. слайдеры Pen Material Design от Ravikumar Chauhan (@rkchauhan) на CodePen.

Основы

Нужно узнать больше об основах создания ползунка диапазона? Тогда ознакомьтесь с примерами на w3schools.

Узнайте, как создать ползунок диапазона

Видео ниже тщательно отобрано и дает вам четкое объяснение того, как вы можете собрать этот модуль самостоятельно.

Ползунок пользовательского диапазона — HTML + CSS + JS — MinzCode

В этом видео создайте собственный дизайн слайдера диапазона.