Ползунок
Ползунок предназначен для ввода чисел в указанном диапазоне, но в отличие от поля имеет другой интерфейс и применяется в тех случаях, когда не особенно важно указывать точное значение. На рис. 1 продемонстрирован вид ползунка в разных браузерах.
Рис. 1. Вид ползунка в браузерах
Синтаксис создания ползунка следующий.
Здесь min — минимальное число в диапазоне (по умолчанию 0), max — максимальное число (по умолчанию 100), step — шаг изменения чисел (по умолчанию 1), value — текущее значение. По умолчанию value вычисляется по формуле:
Атрибуты не являются обязательными, их можно опустить, в таком случае они принимают значения по умолчанию.
Независимо от минимального и максимального числа ширина ползунка остаётся одинаковой.
Сами ползунки редко применяются в «чистом» виде, поскольку не обеспечивают необходимую обратную связь с пользователем, а вот в сочетании с JavaScript это становится мощным и удобным элементом интерфейса. В примере 1 с помощью ползунка изменяется размер изображения, такая возможность часто используется в различных фотогалереях.
Пример 1. Использование ползунка
HTML5 IE 10 Cr Op Sa Fx
Рис. 2. Управление шириной картинки с помощью ползунка
Стилизация и создание скриптов для ползунков
Ползунок, дорожка и бегунок
Ползунок состоит из дорожки, по которой пользователь перетаскивает бегунок. К дорожке и бегунку можно применять стили, но не скрипты.
Основы стилей
Стилизация ползунков не так уж трудна. Для бегунка и дорожки можно настроить стили, хотя необходимые псевдоэлементы зависят от браузера:
Нельзя комбинировать эти селекторы в одном правиле, даже несмотря на то, что правильнее использовать для всех браузеров одни и те же стили ( кроме отступов для бегунка ). Если браузер находит один селектор, который он не распознает, то игнорирует все остальные. Поэтому вам придется повторяться или использовать генератор CSS на серверной стороне.
IE и MS Edge требуют прозрачный color и border-color на дорожке, или они отобразят стили дорожки по умолчанию. Кроме того, для ползунка им нужны иные отступы, чем в других браузерах.
CSS шаблон
Все эти несущественные проблемы приводят к следующему шаблону CSS :
Свойство appearance и ошибка Android WebKit
Моим первоначальным планом было получить доступ к стилям бегунка и посмотреть, соответствуют ли они моим. Если они не подходят, то мы применяем slider-horizontal :
Заполнение полосы прогресса
Всплывающие подсказки
Я пробовал движущийся элемент, реагирующий на перемещение бегунка, но написание скриптов не срабатывает, и получить текущие координаты бегунка невозможно. Также пытался использовать текущее значение ползунка вместо координат, но попытка завершилась провалом. В конечном счете, мы решили использовать статическую подсказку ( которая в действительности не выглядит как подсказка ).
В IE/Edge есть встроенная подсказка, которая по большей части не может быть стилизована. К счастью, вы можете скрыть ее:
События ввода и изменения
Когда пользователь передвигает бегунок по дорожке, ползунок может вызывать события ввода или изменения. Одни браузеры непрерывно « порождают » события во время перемещения, другие – только после остановки перемещения.
При отслеживании действий пользователя с ползунком перехватывайте события ввода и изменения. Затем вызывайте обработчик события, когда пользователь прекратит перемещение бегунка. Это дает стабильный результат во всех браузерах:
Хотя стабильное отслеживание каждого отдельного пикселя перемещения возможно в некоторых браузерах, а другие браузеры вообще не поддерживают это. И это привело бы к лишним затратам ресурсов, особенно на мобильных устройствах. Но я был бы рад, если кто-нибудь опровергнет эти предположения.
Ползунок html + CSS
Здравствуйте уважаемые начинающие веб-мастера. Ещё один Оригинальный эффект CSS.
Сейчас будем делать красивый ползунок для сайта. Простой-то ползунок сделать просто. Достаточно ввести в html код тег input с атрибутом type=»range», как любой браузер поймёт, что на экране нужно вывести ползунок.
Вот пожалуйста, вставляем в любом месте
Невзрачненько. Чтоб сделать этот бегунок красивым, можно применить css, но не всё так просто. Дело в том, что каждый браузер отображает бегунок по своему.
Я не стану забивать Вам мозги подробностями, почему так происходит, Вы же ещё только начинающие, и многое Вам будет совершенно не понятно.
Скажу только, что для того чтоб наш бегунок получился красивым во всех браузерах, мы будем использовать вендорные (браузерные) префиксы.
Далее я Вам дам несколько вариантов кода с объясняющими комментариями, и Вы методом научного тыка и матерного слова (самый результативный метод), сможете поработать в Notepad ++ над внешним видом бегунка.
Про незнакомые элементы кода, лучше всего можно узнать на сайте htmlbook. Более понятного и подробного описания, с примерами, в интернете нет.
Итак, код красивого бегунка:
input[type=range] <
-webkit-appearance : none ;
margin : 50px ;
width : 20% ;
>
input[type=range]:focus <
outline : none ;
>
input[type=range]::-webkit-slider-runnable-track <
height : 8px ;
cursor : pointer ;
animate : 0.2s ;
border : 1px solid #575656 ;
background : #AD020D ;
>
input[type=range]::-moz-range-track <
height : 8px ;
cursor : pointer ;
animate : 0.2s ;
box-shadow : 1px 1px 1px #000 ;
background : #AD020D ;
border : 1px solid #575656 ;
>
input[type=range]::-moz-range-thumb <
box-shadow : 1px 1px 1px #000 ;
border : 1px solid #000000 ;
height : 36px ;
width : 16px ;
border-radius : 40%/60% ;
background : #ffffff ;
cursor : pointer ;
>
/style >
/head >
body >
input type =» range » value =» 0 » max =» 100 «/>
/body >
/html >
А вот и он сам, работает, можно подвигать:
Ещё один пример, в котором линия, по которой двигается бегунок, является индикатором.
input[type=range] <
-webkit-appearance : none ;
appearance : none ;
width : 260px ;
height : 20px ;
padding : 0 ;
box-shadow : inset 0 0 0 2px #2D7CFA ;
background : #AD020D ;
overflow : hidden ;
>
/* Линия-ндикатор для Firefox */
input[type=range]::-moz-range-track <
background : none ;
border : none ;
>
/* ползунок в Firefox */
Результат, так же рабочий:
Чтоб метод тыка и матерного слова, не свёлся у Вас к простому копированию, а был осмысленным и, значит, более плодотворным, я убрал из кода обеих ползунков участок, предназначенный для IE.
Постарайтесь сделать его самостоятельно, и Вы получите наибольшую пользу от этой статьи.
Желаю творческих успехов.
Перемена
Мужчина упал с десятого этажа, и не разбился. Так целиком и похоронили.
Код ползунка в html
Исходный код данного примера расположен в GitHub репозитории. Если вы хотите внести внести изменения в привер, пожалуйста склонируйте https://github.com/mdn/interactive-examples и отправьте нам пул реквест.
Валидация
Для этого поля нет доступного паттерна валидации, но следующая валидация реализованы следующие проверки
Если предпринята попытка установить значение меньше минимального, то оно примет значение атрибута min. Аналогично, попытка установить значение больше максимального, приведёт к установлению значения равного атрибуту max.
Дополнительные атрибуты
The values of the list attribute is the id of a element located in the same document. The provides a list of predefined values to suggest to the user for this input. Any values in the list that are not compatible with the type are not included in the suggested options. The values provided are suggestions, not requirements: users can select from this predefined list or provide a different value.
Смотрите управление диапазоном с помощью решётки ниже, для примера того, как параметры диапазона обозначаются в поддерживаемых браузерах.
Не стандартные атрибуты
Examples
Несколько примеров основный ситуаций, в которых инпуты с range используются:
Как правило, если пользователь в большей степени интересуется процентным значением между минимумом и максимумом, нежели реальным значением, range инпут является отличным решением. Например, в случае с контролем громкости домашнего стерео, обычно пользователь думает «установить громкости наполовину максимума» вместо «установить громкость на 0.5».
Указание минимума и максимума
Настройка детализации значения
По умолчанию, степень детализации равна 1, тем самым показывая, что значение всегда является целым числом. Вы можете изменить атрибут step контроля степени детализации. Например, если вам нужно значение между 5 и 10, с точностью до двух знаков после запятой, вы должны установить значение step на 0.01:
Если вы хотите принять любое значение, независимо от разрядности, вы можете указать значение any для атрибута step :
Этот пример позволяет пользователю выбрать любое значение между 0 и π без ограничений на разрядность.
Добавление хэш-меток и лейблов
Макеты контроллера диапазона
Так как браузеры имеют эту гибкость, и на сегодняшний день ни один из них не поддерживает все возможности, определённые HTML, представляем несколько макетов, показывающих как вы можете получить на macOS в браузере, который их поддерживает.
Недекорированный контроллер диапазона
Контроллер диапазона с хэш-метками
Контроллер диапазона с хэш-метками и лейблами
Изменение ориентации
По умолчанию, если браузер отображает инпут диапазона как слайдер, он отобразит его так чтоб ползунок ездил в право и в лево. Когда поддержка браузерами будет реализовано, можно будет делать слайдер вертикальным, так чтобы ползунок мог ездить вверх и вниз. Ни один из наиболее используемых браузеров не имплементировал это пока. (Firefox баг 981916, Chrome bug 341071). также, возможно, следующий баг под вопросом.
Рассмотрим контроллер диапазона:
| Screenshot | Live sample |
|---|---|
 |
Это горизонтальный контроллер (по крайне мере на большинстве основных браузеров, другие могут отличаться).
Standards
Следуя спецификации, сделать его вертикальным также просто как добавить CSS, чтобы изменить размеры контроллера, чтобы его высота оказалась больше ширины:
Результат
| Screenshot | Live sample |
|---|---|
 |
К сожалению, большинство браузеров сейчас не поддерживают вертикальные контроллы напрямую.
transform: rotate(-90deg)
Теперь нам нужно немного CSS. Во-первых, это CSS для самой обёртки; это указание дисплея и размеров для правильного расположения на странице; по сути, он резервирует область страницы для слайдера, так, чтобы можно было поместить повёрнутый слайдер в зарезервированном пространстве, не создавая беспорядка.
Затем информация о стиле элемента в зарезервированном пространстве:
Размеры контроллера это набор из 150 пикселей длины и 20 пикселей высоты. Маржинги установлены на 0 и transform-origin (en-US) смещается в середину пространства, на котором вращается слайдер; поскольку слайдер имеет ширину 150 пикселей, он вращается через прямоугольник по 150 пикселей с каждой стороны. Смещение начала координат на 75px по каждой оси означает, что мы будем вращаться вокруг центра этого пространства. Наконец, мы поворачиваем против часовой стрелки на 90°. Результат: инпут range, который вращается таким образом, что максимальное значение находится сверху, а минимальное снизу.
| Screenshot | Live sample |
|---|---|
 |
appearance property
Используем тот же HTML что и в предыдущем примере:
Берём только те инпуты что имеют тип range:
orient attribute
Используем тот же HTML что и в предыдущем примере и добавляем атрибут со значением vertical :
writing-mode: bt-lr;
Свойство writing-mode может быть использовано для специальных эффектов
Используем тот же HTML что и в предыдущем примере:
Все вместе
Каждый из вышеперечисленных примеров работает в своём браузере, мы попробуем объединить все вместе чтоб добиться кроссбраузерности решения:
Оставим orient атрибут со значением vertical для Firefox:
Узнайте, как создавать пользовательские ползунки диапазона с помощью CSS и JavaScript.
Default:
Square:
Round:
Image:
Создание ползунка диапазона
Шаг 1) добавить HTML:
Пример
Шаг 2) добавить CSS:
Пример
.slidecontainer <
width: 100%; /* Width of the outside container */
>
/* Mouse-over effects */
.slider:hover <
opacity: 1; /* Fully shown on mouse-over */
>
.slider::-moz-range-thumb <
width: 25px; /* Set a specific slider handle width */
height: 25px; /* Slider handle height */
background: #4CAF50; /* Green background */
cursor: pointer; /* Cursor on hover */
>
Шаг 3) добавить JavaScript:
Создайте ползунок динамического диапазона для отображения текущего значения с помощью JavaScript:
Пример
var slider = document.getElementById(«myRange»);
var output = document.getElementById(«demo»);
output.innerHTML = slider.value; // Display the default slider value
// Update the current slider value (each time you drag the slider handle)
slider.oninput = function() <
output.innerHTML = this.value;
>
Круглый ползунок
Для создания круглого маркера ползунка используйте border-radius свойство. Совет: Установите высоту ползунка на другое значение, чем ползунок, если вы хотите неравные высоты (15пкс vs. 25пкс в этом примере):
Пример
.slider::-webkit-slider-thumb <
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
border-radius: 50%;
background: #4CAF50;
cursor: pointer;
>
.slider::-moz-range-thumb <
width: 25px;
height: 25px;
border-radius: 50%;
background: #4CAF50;
cursor: pointer;
>
Иконка слайдер/изображение
Чтобы создать значок или изображение маркера ползунка, используйте background свойство и вставьте URL-адрес изображения: