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

Значение range

Тип range (от англ. «range» ‒ «диапазон, спектр») создаёт ползунок.

Внешний вид

• ‒ ползунок;
• ‒ фокус;
• ‒ наведение курсора.

Примечание

В большинстве браузеров по умолчанию ручка ползунка всегда находится посередине.

Поддержка браузерами

Спецификация

Верс.	Раздел
HTML
2.0	Input Field: INPUT
3.2	INPUT text fields, radio buttons, check boxes, .
4.01	17.4.1 Control types created with INPUT
5.0	4.10.5.1.10 Range state (type=range)
5.1	4.10.5.1.13. Range state (type=range)
XHTML
1.0	Extensible HyperText Markup Language
1.1	Extensible HyperText Markup Language

Сопутствующие атрибуты

autocomplete Автозаполнение значения (положения) ползунка. autofocus Автоматческая фокусировка на ползунке после полной загрузки страницы. disabled Блокировка ползунка.

disabled=»disabled»

form Присоединение ползунка к форме. list Создание дополнительных меток на шкале ползунка.

max Указывает, максимальное значение ползунка.

Значение по умолчанию: « 100 ».

min Указывает, минимальное значение ползунка.

Значение по умолчанию: « 0 ».

name Присваивает имя ползунку. step Устанавливает интервал увеличения значения (перемещения) ползунка.

Значение по умолчанию: « 1 ».

value Указывает числовое значение ползунка, отправляемое на сервер или используемое сценариями.

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

min=»0″ max=»10″ value=»8″

Input range, или как создать стильный ползунок на HTML

Один из самых сложных html элементов для оформления — это input с типом range, или проще говоря ползунок выбора. Обычно выбора диапазона чисел. Хотя в Сети можно найти немало хороших вариантов, я хотел бы поделиться своим, как красиво оформить данный элемент. Вначале определимся с задачами:

• Элемент будет состоять из 4 частей: собственно сам двойной ползунок, линейка с отметками со значениями, поля для ручного ввода значений, и кликабельная гистограмма (как на Алиэкспресс).
• Ползунок должен быть адаптивным.
• Минимум javascript.
• Отказываемся от использования картинок (не очень удобно редактировать внешний вид). Кому интересно, вот еще один качественный слайдер для диапазона цен с использованием изображений.

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

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

Если используемый браузер не поддерживает тип range , он будет отображаться как input text (en-US).

Value	DOMString , содержащий строковое представление выбранного числового значения; используйте valueAsNumber чтобы получить значение Number .
События	change (en-US) и input (en-US)
Поддерживаемые общие атрибуты	autocomplete , list , max , min , and step
IDL атрибуты	list , value , и valueAsNumber
Методы	stepDown() (en-US) и stepUp() (en-US)

Валидация

Для этого поля нет доступного паттерна валидации, но следующая валидация реализованы следующие проверки

• Если значение value содержит что-то что не может быть конвертированно в число с плавающей точкой, произойдёт ошибка некорректного ввода.
• Значение не может быть меньше чем min . По умолчанию: 0.
• Значение не может быть больше чем max . По умолчанию: 100.
• Значение должно кратно step . По умолчанию: 1.

Атрибут value содержит DOMString , который содержит строковое представление выбранного числа. Значение никогда не является пустой строкой ( «» ). Значение, по умолчанию, находится посередине, между указанными минимальным и максимальным значениями — если максимум оказывается меньше минимума, то значение по умолчанию приравнивается к значению атрибута min . Алгоритм определения значения по умолчанию:

= rangeElem.max  rangeElem.min ? rangeElem.min : rangeElem.min + (rangeElem.max - rangeElem.min) / 2; 

Если предпринята попытка установить значение меньше минимального, то оно примет значение атрибута min. Аналогично, попытка установить значение больше максимального, приведёт к установлению значения равного атрибуту max.

Дополнительные атрибуты

list

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

max

Наибольшее допустимое значение. Если value элемента превышает этого значения, элемент не проходит проверку ограничений. Если значение атрибута max (en-US) не является числом, то у элемента нет максимального значения.

Это значение должно быть больше или равно значению атрибута min (en-US) . Смотрите также HTML-атрибут max (en-US) .

min

Наименьшее допустимое значение. Если value элемента меньше этого значения, элемент не проходит проверку ограничений. Если значение атрибута min (en-US) не является числом, то у элемента нет минимального значения.

Это значение должно быть меньше или равно значению атрибута max (en-US) . Смотрите также HTML-атрибут min (en-US) .

Примечание: Если значения min и max равны или max меньше min , то у пользователя не будет возможности взаимодействовать с диапазоном.

step

Атрибут step — это число, указывающее уровень точности, которому должно соответствовать значение. Допустимы только значения, соответствующие указанному размеру шага ( min , если указано, value в противном случае или любое подходящее значение по умолчанию, если не указано ни то, ни другое).

Атрибут step также может принимать строковое значение any . Такое значение означает, что пошаговое изменение не подразумевается и разрешены любые значения (за исключением других ограничений, таких как min and max ).

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

По умолчанию размер шага для полей ввода range равен 1, что допускает ввод только целых чисел, пока размер шага является целым числом. Например, если установить min в -10, а value в 1.5, то step равный 1 будет допускать только такие значения, как 1.5, 2.5, 3.5,… больше нуля и -0.5, -1.5, -2.5,… меньше нуля. Смотрите также HTML-атрибут step (en-US) .

Нестандартные атрибуты

Attribute	Description
orient	Устанавливает ориентацию слайдера. Firefox only.

orient Non-standard

Примечание: Note: Следующие атрибуты не применимы: accept , alt , checked , dirname , formaction , formenctype , formmethod , formnovalidate , formtarget , height , maxlength , minlength , multiple , pattern , placeholder , readonly , required , size , src , и width . Каждый из них будет проигнорирован в случае употребления.

Examples

Пока тип number позволяет пользователям вводить число с дополнительными ограничениями, заставляя их значения находиться между максимальным и минимальным, он требует, чтобы они вводили определённое значение. Инпут с типом range позволяет вам запрашивать у пользователя значение в тех случаях, когда пользователь не может даже знать — каково выбранное конкретное числовое значение.

Несколько примеров основный ситуаций, в которых инпуты с range используются:

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

Как правило, если пользователь в большей степени интересуется процентным значением между минимумом и максимумом, нежели реальным значением, range инпут является отличным решением. Например, в случае с контролем громкости домашнего стерео, обычно пользователь думает «установить громкости наполовину максимума» вместо «установить громкость на 0.5».

Указание минимума и максимума

По умолчанию, минимум равен 0, а максимум равен 100. Если вас это не устраивает, вы можете с лёгкостью указать другие границы, изменив значения атрибутов min и/или max . Они могут быть принимать любые значения с плавающей точкой.

Например, указать диапазон значений между -10 и 10, вы можете, используя:

input type="range" min="-10" max="10" /> 

Настройка детализации значения

По умолчанию, степень детализации равна 1, тем самым показывая, что значение всегда является целым числом. Вы можете изменить атрибут step контроля степени детализации. Например, если вам нужно значение между 5 и 10, с точностью до двух знаков после запятой, вы должны установить значение step на 0.01:

input type="range" min="5" max="10" step="0.01" /> 

Если вы хотите принять любое значение, независимо от разрядности, вы можете указать значение any для атрибута step :

input type="range" min="0" max="3.14" step="any" /> 

Этот пример позволяет пользователю выбрать любое значение между 0 и π без ограничений на разрядность.

Добавление хэш-меток и лейблов

Спецификация HTML даёт браузерам некоторую гибкость при представлении диапазонных контроллеров. Нигде эта гибкость не проявляется больше, чем в области хэш-меток и, в меньшей степени, лейблов. Спецификация описывает как добавлять кастомные точки контроллера диапазона, используя атрибут list и элемент , но не имеет требований или рекомендаций по стандартизации хэш-меток и лейблов по длине контроллера.

Макеты контроллера диапазона

Так как браузеры имеют эту гибкость, и на сегодняшний день ни один из них не поддерживает все возможности, определённые HTML, представляем несколько макетов, показывающих как вы можете получить на macOS в браузере, который их поддерживает.

Недекорированный контроллер диапазона

Этот результат вы получите, если не укажите атрибут list , или браузер не будет его поддерживать.

input type="range">

Контроллер диапазона с хэш-метками

input type="range" list="tickmarks"> datalist id="tickmarks"> option value="0"> option value="10"> option value="20"> option value="30"> option value="40"> option value="50"> option value="60"> option value="70"> option value="80"> option value="90"> option value="100"> datalist> 

Контроллер диапазона с хэш-метками и лейблами

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

input type="range" list="tickmarks"> datalist id="tickmarks"> option value="0" label="0%"> option value="10"> option value="20"> option value="30"> option value="40"> option value="50" label="50%"> option value="60"> option value="70"> option value="80"> option value="90"> option value="100" label="100%"> datalist> 

Примечание: В настоящее время ни один браузер полностью не поддерживает эти возможности. Firefox не поддерживает хэш-метки и лейблы, например, в то время как Chrome поддерживает хэш-метки, но не поддерживает лейблы. Версия 66 (66.0.3359.181) Chrome поддерживает лейблы, но тэг должен быть стилизован с помощью CSS, так как его свойство display по умолчанию — none , тем самым скрывая лейблы.

Изменение ориентации

По умолчанию, если браузер отображает инпут диапазона как слайдер, он отобразит его так чтоб ползунок ездил в право и в лево. Когда поддержка браузерами будет реализовано, можно будет делать слайдер вертикальным, так чтобы ползунок мог ездить вверх и вниз. Ни один из наиболее используемых браузеров не имплементировал это пока. (Firefox Firefox bug 981916, Chrome bug 341071). также, возможно, следующий баг под вопросом.

В реальности, мы можем сделать слайдер вертикальным используя CSS трансформации, или применяя уникальный метод для каждого браузера в отдельности, включая: настройки appearance для slider-vertical , использование нестандартной ориентации orient в Firefox,или изменение text direction для Internet Explorer и Edge

Рассмотрим контроллер диапазона:

input type="range" id="volume" min="0" max="11" value="7" step="1" /> 

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

Standards

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

CSS

#volume  height: 150px; width: 50px; > 

HTML

input type="range" id="volume" min="0" max="11" value="7" step="1" /> 

Результат

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

transform: rotate(-90deg)

Но вы, всё же, можете сделать вертикальный контролл используя горизонтальный контролл. Самый простой способ — использовать CSS: применяя transform для поворота элемента на 90 градусов. Посмотрим:

HTML

div class="slider-wrapper"> input type="range" min="0" max="11" value="7" step="1" /> div> 

CSS

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

.slider-wrapper  display: inline-block; width: 20px; height: 150px; padding: 0; > 

Затем информация о стиле элемента в зарезервированном пространстве:

.slider-wrapper input  width: 150px; height: 20px; margin: 0; transform-origin: 75px 75px; transform: rotate(-90deg); > 

Размеры контроллера это набор из 150 пикселей длины и 20 пикселей высоты. Маржинги установлены на 0 и transform-origin (en-US) смещается в середину пространства, на котором вращается слайдер; поскольку слайдер имеет ширину 150 пикселей, он вращается через прямоугольник по 150 пикселей с каждой стороны. Смещение начала координат на 75px по каждой оси означает, что мы будем вращаться вокруг центра этого пространства. Наконец, мы поворачиваем против часовой стрелки на 90°. Результат: инпут range, который вращается таким образом, что максимальное значение находится сверху, а минимальное снизу.

appearance property

Свойство appearance имеет нестандартное значение slider-vertical , которое делает слайдер вертикальным.

HTML

Используем тот же HTML что и в предыдущем примере:

input type="range" min="0" max="11" value="7" step="1" /> 

CSS

Берём только те инпуты что имеют тип range:

input[type="range"]  -webkit-appearance: slider-vertical; > 

orient attribute

В Firefox, реализовано нестандартное свойство orient .

HTML

Используем тот же HTML что и в предыдущем примере и добавляем атрибут со значением vertical :

input type="range" min="0" max="11" value="7" step="1" orient="vertical" /> 

writing-mode: bt-lr

Свойство writing-mode может быть использовано для специальных эффектов

HTML

Используем тот же HTML что и в предыдущем примере:

input type="range" min="0" max="11" value="7" step="1" /> 

CSS

Берём только те инпуты что имеют тип range, меняем writing mode с default на bt-lr , или bottom-to-top и left-to-right:

input[type="range"]  writing-mode: bt-lr; > 

Все вместе

Каждый из вышеперечисленных примеров работает в своём браузере, мы попробуем объединить все вместе чтоб добиться кроссбраузерности решения:

HTML

Оставим orient атрибут со значением vertical для Firefox:

input type="range" min="0" max="11" value="7" step="1" orient="vertical" /> 

CSS

Берём только те инпуты что имеют тип range, меняем writing mode с default на bt-lr , или bottom-to-top и left-to-right, для Edge и Internet Explorer, и добавляем -webkit-appearance: slider-vertical для всех -webkit-based браузеров:

input[type="range"]  writing-mode: bt-lr; -webkit-appearance: slider-vertical; > 

Спецификации

Specification
HTML Standard # range-state-(type=range)

Совместимость с браузерами

BCD tables only load in the browser

Смотрите также

• HTML Forms
• и интерфейс HTMLInputElement (en-US), на котором он основан
• validityState.rangeOverflow и validityState.rangeUnderflow
• Controlling multiple parameters with ConstantSourceNode (en-US)
• Styling the range element
• Compatibility of CSS properties (en-US)

Found a content problem with this page?

• Edit the page on GitHub.
• Report the content issue.
• View the source on GitHub.

This page was last modified on 6 янв. 2024 г. by MDN contributors.

Your blueprint for a better internet.

MDN

Support

• Product help
• Report an issue

Our communities

Developers

• Web Technologies
• Learn Web Development
• MDN Plus
• Hacks Blog

• Website Privacy Notice
• Cookies
• Legal
• Community Participation Guidelines

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2024 by individual mozilla.org contributors. Content available under a Creative Commons license.

Ползунок настраиваемого диапазона с использованием HTML, CSS и JavaScript

Вы узнаете, как создать ползунок настраиваемого диапазона с помощью HTML, CSS и JavaScript. Мы видим его на разных типах веб-сайтов электронной коммерции или на разных типах бизнес-сайтов. Этот тип ползунка диапазона HTML используется для выбора определенного значения в ползунке.

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

Этот тип ползунка диапазона с минимальным и максимальным значениями очень важен для сайта электронной коммерции. Я использовал анимацию в этом ползунке настраиваемого диапазона. Кнопка, изменяющая значение, разработана с помощью CSS. Вместо кнопок используются эмодзи.

Как создать ползунок настраиваемого диапазона с помощью HTML, CSS

Эмодзи в слайдере могут rotate 360 degrees . Эмодзи будет под углом 0 градусов при минимальном значении ползунка. Он будет вращаться, когда вы измените положение смайлика. Если вы новичок, то этот проект очень важен для вас.

Сначала мы создали базовую структуру ползунка с помощью HTML. Затем для активации этого ползунка настраиваемого диапазона был использован JavaScript.

Этот ползунка можно использовать в дополнение к JavaScript. Однако для активации отображения важен JavaScript. Значение дисплея изменится, когда вы измените положение кнопки на ползунке.

Чтобы сделать этот настраиваемый ползунка диапазона, вам необходимо иметь базовое представление о HTML и CSS. Я представил демонстрацию, которая поможет вам узнать больше об этом ползунке настраиваемого диапазона.

Шаг 1. Базовая структура ползунка настраиваемого диапазона

Пришло время создать базовую структуру ползунка настраиваемого диапазона. Мы знаем, что ползунок настраиваемого диапазона создается с помощью функции ввода. Здесь я впервые создал ползунок настраиваемого диапазона, используя ввод и спроектированный с использованием некоторого количества CSS.

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

html, body < margin: 0; height: 100%; >body

Шаг 2. Создайте дисплей для просмотра значений

Теперь я спроектировал уровень, т.е. следующие коды были использованы для разработки отображения представления значений. Я сделал небольшую коробку с белым фоном. Здесь используется синий цвет текста.

label

Шаг 3. Используйте изображения вместо кнопок-ползунков

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

Как я уже говорил, смайлы использовались для придания красоты. Этот смайлик будет действовать как кнопка. Мы знаем, что в случае обычного ползунка диапазона кнопку можно перемещать. Здесь также значение диапазона будет изменено путем перемещения изображения.

Как упоминалось ранее, эта кнопка может rotate 360 . Но эта работа была сделана с помощью JavaScript.

input[type="range"] < -webkit-appearance: none; background: transparent; width: 90%; max-width: 500px; outline: none; >input[type="range"]:focus, input[type="range"]:active < border: 0; outline: none; >input[type="range"]::-webkit-slider-thumb < border: none; height: 40px; width: 40px; background-color: transparent; background-image: url("https://cdn.pixabay.com/photo/2020/09/14/18/34/amazed-5571740_1280.png"); background-position: 0 0; background-size: cover; transform: scale(1.9) rotateZ(var(--thumb-rotate, 10deg)); cursor: pointer; margin-top: -15px; -webkit-appearance: none; >

input[type="range"]::-webkit-slider-thumb:active

Шаг 4: Создайте работающую дорожку ползунка диапазона

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

input[type="range"]::-webkit-slider-runnable-track

Шаг 5. Активируйте ползунок настраиваемого диапазона с помощью JavaScript

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

Сначала я устанавливаю ввод и уровень, то есть константу изображения и дисплея, один за другим. Потому что мы не можем использовать какие-либо функции HTML непосредственно в JavaScript.

const input = document.querySelector("input"); const label = document.querySelector("label"); input.addEventListener("input", event => < const value = Number(input.value) / 100; input.style.setProperty("--thumb-rotate", `$deg`); label.innerHTML = Math.round(value * 50); >); 

Надеюсь, из этого руководства вы узнали, как создать ползунок настраиваемого диапазона с помощью HTML, CSS и JavaScript.