Как изменить цвет ползунка range css

Как изменить цвет ползунка range css

В настоящее время я работаю над своим первым оплачиваемым проектом. Помимо всего прочего в этом проекте от меня требуется стилизация и написание скриптов для ползунков. Есть несколько интересных моментов, на которые мне бы хотелось обратить ваше внимание, такие как проблемы отображения в IE , Android WebKit и правильное использование событий ввода и изменения. А также краткий обзор синтаксиса.

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

Ползунок, дорожка и бегунок

Вот ползунок. Технически он известен как , и он не поддерживается IE9 и ниже.

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

Основы стилей

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

Для бегунка используется -webkit-slider-thumb , -moz-range-thumb или -ms-thumb .

К дорожке можно « обратиться » с помощью -webkit-slider-runnable-track , -moz-range-track или -ms-track .

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

IE и MS Edge требуют прозрачный color и border-color на дорожке, или они отобразят стили дорожки по умолчанию. Кроме того, для ползунка им нужны иные отступы, чем в других браузерах.

В моем примере высота ползунка примерно 40 пикселей. Оказывается, в основных стилях ползунка установлено свойство overflow: hidden , которое скрывает большую часть ползунка в Edge и IE . Чтобы исправить это, мне пришлось явно задать высоту ползунка.

В IE , но не в Edge , ползунок имеет отступ. Поэтому задайте отступ padding: 0 и спасите себя от головной боли.

Я читал несколько раз, что MS Edge должен поддерживать свойства -webkit- . Но на практике оказалось, что невозможно работать с одним набором стилей и для Edge , и для WebKit/Blink . Я советую использовать отдельные -ms- стили хотя бы потому, что они нужны для IE10 и IE11 . Лучше всего определить стили -ms- после -webkit- : таким образом -ms- стили будут точно выполняться в Edge .

В браузерах, построенных на основе движков WebKit и Blink , бегунок имеет по умолчанию box-sizing: border-box , в то время как во всех остальных браузерах, значение этого свойства равно content-box . Лучше задать box-sizing для бегунка в явном виде.

WebKit и Blink также требуют -webkit-appearance: none , но с одним исключением. Смотрите ниже.

CSS шаблон

Все эти несущественные проблемы приводят к следующему шаблону CSS :

Свойство appearance и ошибка Android WebKit

Еще один недостаток в браузерах на основе WebKit и Blink заключается в том, что вы должны установить свойство -webkit-appearance: none для ползунка и для бегунка ( но не для дорожки ). Это показано в шаблоне CSS , приведенном выше.

Настоящая проблема в том, что Android WebKit требует от вас не использовать это объявление. Если вы добавите -webkit-appearance: none , Android WebKit будет неправильно отображать ваши стили. Удаление этого кода исправляет ошибку, но тогда стили ползунка не будут отображаться в Safari , Chrome и некоторых других браузерах. Решим эту проблему вместе.

Мы задали в CSS -webkit-appearance: none , это единственное решение, у которого есть будущее. В Android WebKit мы хотим изменить значение на slider-horizontal . Но как мы узнаем, что мы в Android WebKit ?

Распознавание браузера? Так не принято в наших кругах – что и к лучшему: это не сработало бы в Xiaomi Chromium 34 ( или 35 ), который базируется на Chromium и, следовательно, требует значение none, но при этом « маскируется » под Android .

Моим первоначальным планом было получить доступ к стилям бегунка и посмотреть, соответствуют ли они моим. Если они не подходят, то мы применяем slider-horizontal :

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

Затем я увидел, что это применение getComputedStyle() не поддерживается в Android WebKit . Ни один стиль не возвращается, даже стили по умолчанию.

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

Вы можете выполнить тест один раз и использовать результаты для каждого ползунка. Неважно, какое свойство CSS вы тестируете, проверьте, действительно ли оно существует. Если значение не возвращается, то устанавливаем -webkit-appearance: slider-horizontal для каждого ползунка. Проблема решена. Даже лучше, другие браузеры игнорирует нас, пока мы используем — webkit- .

Заполнение полосы прогресса

В моем примере дорожка слева от бегунка должна иметь цвет фона отличный от дорожки справа. IE/Edge и Firefox предлагают для этого использовать псевдоэлементы, WebKit и Blink – нет. Этот код решает проблему во всех версиях IE , Firefox и Edge :

Что касается браузеров на основе WebKit- и Blink, то тут нужно решение с JavaScript. Я одолжил свое из примеров Ana Tudor . В этом решении используется линейный градиент со стоп-цветом, вычисляемым от текущего значения ползунка. Посмотрите скрипт , особенно код функции handleSlider() .

Всплывающие подсказки

Ana Tudor также показала, как можно использовать псевдоэлемент :before в качестве стилизованной подсказки, содержащей текущее значение. К сожалению, выяснилось, что в этом случае IE/Edge и Firefox не поддерживают :before или :after . В IE/Edge есть встроенная подсказка ( смотрите ниже ), но в Firefox невозможно отобразить всплывающие подсказки.

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

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

События ввода и изменения

Когда пользователь передвигает бегунок по дорожке, ползунок может вызывать события ввода или изменения. Одни браузеры непрерывно « порождают » события во время перемещения, другие – только после остановки перемещения.

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

Хотя стабильное отслеживание каждого отдельного пикселя перемещения возможно в некоторых браузерах, а другие браузеры вообще не поддерживают это. И это привело бы к лишним затратам ресурсов, особенно на мобильных устройствах. Но я был бы рад, если кто-нибудь опровергнет эти предположения.

Стилизовать input type=range перед ползунком

Моя задача – поменять цвет слайдера перед тумблером. Как это сделать?

Если не понятно, то могу привести пример.

Вот пример стилей где цвета до и после ползунка различаются:

Как я понял вам нужно без overflow: hidden; на input. Вот рабий пример и для этого:

Всё ещё ищете ответ? Посмотрите другие вопросы с метками html css input или задайте свой вопрос.

Site design / logo © 2022 Stack Exchange Inc; user contributions licensed under cc by-sa. rev 2022.4.14.41981

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Стилизация полосы прокрутки HTML5 для разных браузеров

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

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

В браузерах Chrome, Safari и Opera

Safari и Opera — браузеры Webkit. Хотя Chrome решил использовать свой собственный движок Blink, пока что он все еще наследуют некоторые формы записи от Webkit.

Webkit предоставляет удобный способ стилизации любых форм ввода, включая ползунок. Для начала мы можем выбрать тег input с атрибутом selector и отменить стандартные стили Webkit/Chrome, задав свойству -webkit-appearance значение none.

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

Как Вы можете видеть ниже, код выше не затронул только ручку ползунка из всего тега input.

Чтобы применить к ней стили, нам нужно использовать собственный псевдоэлемент Webkit ::-webkit-slider-thumb и таким же способом отменить стандартные стили с помощью -webkit-appearance, следующим образом:

Так мы зададим стили для ползунка для браузера Webkit. Стили, которые мы задали выше, должны примениться в браузерах Chrome, Safari и в последних версиях браузера Opera. Тем не менее, они не повлияют на браузеры Firefox и Internet Explorer, так как они работают на других движках. Но у нас есть обходные пути для этих двух браузеров.

В браузере Firefox

Добавление стилей напрямую с атрибутом selector input [type=’range’]не изменит стандартные стили в браузере Firefox. Вместо этого нам нужно использовать собственные псевдоэлементы браузера Firefox ::-moz-range-track и ::-moz-range-thumb.

Псевдоэлемент ::-moz-range-track повлияет на полосу ползунка, по которой движется ручка, а ::-moz-range-track повлияет на ручку ползунка.

Мы применили те же стили. Откройте браузер Firefox, и Вы увидите практически такой же результат, как и в браузерах Webkit.

В браузере Internet Explorer

Браузер Internet Explorer отображает полосу прокрутки совсем не так, как остальные браузеры. Чтобы было проще, мы нарисовали изображение, показывающее части, составляющие ползунок.

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

Всем этим частям ползунка можно задать стили с помощью собственных псевдоэлементов браузера Internet Explorer ::-ms-fill-lower, ::-ms-fill-upper, ::-ms-thumb, ::-ms-ticks и ::-ms-tooltip. Здесь мы применим те же стили, что и для браузеров Webkit и Firefox.

Но в результате получилось не то, что мы ожидали. Деления видны, а низ и верх ручки ползунка скрыты.

Мы можем легко избавиться от делений, добавив step=»any» тегу input. Тем не менее, мы не можем сделать ручку ползунка полностью видимой. Это как если бы тегу input задали значения свойства overflow как hidden, но это нельзя отменить, просто задав значения свойства overflow как visible. Это то, с чем мы еще разбираемся.

Заключение

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

Русские Блоги

Пользовательский (ползунок) стиль ввода [type = «range»]

Это мой первый пост в блоге, и он также является отправной точкой для моих маленьких белых усилий. Прошло немного времени с тех пор, как я был новичком в JavaScript. Если в статье есть какие-либо ошибки, вы можете исправить меня или дать мне предложения, чтобы я мог постепенно приблизиться к большой корове. В сегодняшней статье представлены материалы, посвященные украшению ползунка. Range — это новый элемент управления-ползунок в HTML5 и один из распространенных элементов управления. Однако исходный стиль этого элемента управления немного уродлив, поэтому я хочу внести в него некоторые изменения. Следует отметить, что Internet Explorer 9 и более ранние версии IE не поддерживают этот элемент управления. Чтобы

1. Как пользоваться слайдером?

Использование очень простое, как показано ниже:

Исходный стиль каждого браузера выглядит следующим образом:
Chrome:
Firefox:
IE 9+:
Общие (часть) атрибуты следующие:

Атрибуты	описание
max	Установить или вернуть максимальное значение ползунка
min	Установить или вернуть минимальное значение ползунка
step	Устанавливайте или возвращайте величину приращения каждый раз, когда вы перетаскиваете ползунок
value	Устанавливает или возвращает значение атрибута value элемента управления ползунком
defaultValue	Установить или вернуть значение по умолчанию для ползунка
autofocus	Устанавливает или возвращает, должен ли ползунок автоматически получать фокус после загрузки страницы

2. Как украсить слайдер?

Прежде всего, как можно украсить слайдер? В настоящее время я могу думать о следующих двух решениях:

• Полная трансформация стиля напрямую через CSS
• Скрыть ползунок (установить непрозрачность: 0) с помощью пользовательской реализации div

На этот раз я представлю первый относительно простой способ реализации. Чтобы

3. Каков конкретный план реализации?

Чтобы украсить скользящие элементы управления, вам необходимо выполнить следующие пять шагов:

• Удалите системный стиль по умолчанию;
• Добавить стиль к скользящей дорожке (дорожке);
• Добавьте стили на большой палец;
• Заполните индикатор выполнения в соответствии с положением ползунка;
• Обеспечьте совместимость с несколькими браузерами.

Выше приведен весь процесс улучшения скользящего управления. Эффект, который мы хотим достичь сегодня, таков:Если вы хотите добиться эффекта заполнения индикатора выполнения, вы можете использовать :: — ms-fill-lower и :: — ms-fill-upper в браузерах выше IE 9 для настройки индикатора выполнения; в Firefox вы можете использовать :: — moz-range-progress настраивается; но браузер Chrome не поддерживает прямую установку индикатора выполнения и обеспечивает эффект заполнения, поэтому весь процесс сначала реализуется для браузера Chrome.

3.1 Удаление стиля системы по умолчанию

Это первый шаг к украшению скользящего элемента управления, позволяющий избежать использования исходного стиля и сделать последующий индивидуальный стиль эффективным. Код очень прост, как показано ниже, но следует отметить, что для браузеров на основе webkit, таких как Chrome, Safari, Opera и т. Д., Слайдер также должен удалить стиль по умолчанию.

3.2 Добавление стиля к скользящей дорожке (дорожке)

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

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

3.3 Добавление стиля к большому пальцу

Следующее изменяет стиль слайдера, код css не очень сложный, как показано ниже:

3.4 Заполните индикатор выполнения в соответствии с положением ползунка

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

Установите минимальные, максимальные и ступенчатые свойства скользящего элемента управления с помощью объекта cfg. Чтобы
Свяжите событие ввода с элементом управления. Это событие будет срабатывать, когда ползунок перемещается. На этом этапе заполнение индикатора выполнения завершено. Здесь я использую линейный градиент linear-gradient (справа, # 059CFA, white ‘+ this.value + ‘%, white) Таким образом, два цвета — голубой и белый — градиент слева направо, а длина градиента определяется в соответствии со значением элемента управления в это время. Функция обратного вызова вызывается одновременно с запуском события, и функцию, выполняемую функцией обратного вызова, можно спроектировать самостоятельно. Чтобы
Конечно, вы также можете отслеживать другие события в соответствии с вашими потребностями, например, событие изменения, которое будет запускаться при изменении значения, что очень гибко в использовании. Чтобы
Как вызвать функцию в этом js-файле для завершения настройки? Это очень просто. Сначала импортируйте файл js в файл HTML, а затем напрямую определите узел скрипта. Код HTML выглядит следующим образом:

На данный момент на основе браузера Chrome завершено украшение скользящих элементов управления. В конце концов, осталась только совместимость нескольких браузеров.

3.5 Обеспечение совместимости с несколькими браузерами

Если вы хотите быть совместимым Firefox Браузер, просто замените :: — webkit-slider-runnable-track в приведенном выше коде css на ::-moz-range-track , Вы можете завершить украшение дорожки; замените :: — webkit-slider-thumb в коде css на ::-moz-range-thumb Это необходимо для изменения стиля ползунка; и если он должен заполнить индикатор выполнения, это очень просто. Это не обязательно должно быть раньше в RangeSlider.js. $input.css( ‘background’, ‘linear-gradient(to right, #059CFA, white ’ + this.value + ‘%, white)’ ); Чтобы добиться такого заполнения, вам нужно всего лишь добавить следующий код css:

Если вы хотите быть совместимым IE 9 и выше В браузере есть еще несколько мест для изменения приведенного выше кода css, ниже мы сосредоточимся на IE 9+ Код css размещен:

Вышеупомянутое должно быть совместимо с полным кодом css IE 9+, и это не очень сложно. Как и браузер Firefox, он поддерживает прямое использование css для настройки индикатора выполнения, поэтому оригинал в RangeSlider.js $input.css( ‘background’, ‘linear-gradient(to right, #059CFA, white ’ + this.value + ‘%, white)’ ); Метод заполнения не нужен.

Вот несколько проблем, требующих особого внимания в браузере IE:

1. Во время теста было обнаружено, что браузер IE не загрузил файл css, что не привело к изменению стиля. Если у вас также есть эта проблема при использовании браузера E для тестирования, вам необходимо добавить первую строку HTML Изменить на ；
2. При перетаскивании ползунка браузер IE не запускался input Событие, поэтому вы можете изменить только событие мониторинга в RangeSlider.js на change Мероприятие.

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

Обновите метод заливки цвета дорожки

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

прежде всего , Измените файл css input[type=range] Новый код для этой части контента:

Поскольку ползунок по умолчанию здесь изначально начинается с 0, значение равно 0%.

Следующий , Измените файл js:
Поместите эту строку кода $input.css( ‘background’, ‘linear-gradient(to right, #059CFA, white ’ + this.value + ‘%, white)’ ); Изменить на

После небольшой модификации эффект ползунка следующий (часть возле ползунка, цвет не становится светлее):

Быть совместимым FireFox с участием IE Вам все еще нужно CSS , Не нужно проходить js Чтобы сделать процесс заполнения, совместимый с этим эффектом, FireFox нужно только изменить input[type=range]::-moz-range-progress Эта часть; IE 9+ требует доработки input[type=range]::-ms-fill-lower с участием input[type=range]:focus::-ms-fill-lower В этих двух частях реформа закона очень проста. backgound Замените содержимое на

Обновление о совместимом содержимом браузера IE9 +

(1) Для браузера IE может быть проблема, заключающаяся в том, что не может быть загружен css, из-за чего наш стиль не отражается. Предыдущий подход заключался в добавлении первой строки HTML Изменить на , Это не очень хороший подход. Позже в Интернете было найдено лучшее решение. Подробности можно найти по этой ссылке:http://www.uedsc.com/css-mime-type-mismatch.html
Вот краткое описание решения при локальном использовании браузера:
① Нажмите клавишу [win + R] и введите » regedit «Откройте редактор реестра;
② Найти HKEY_LOCAL_MACHINE\SOFTWARE\Classes Под .css Пункт для обеспечения Content Type Является text/css Просто сделай это. Чтобы

(2) При запуске программы в браузере IE внизу может появиться сообщение о том, что сценарий ограничен, что приведет к сбою загрузки файла JS, просто нажмите «Разрешить заблокированный контент». Чтобы

Наконец, прикрепите полный код. Вы можете загрузить его самостоятельно. Он содержит две демонстрации, одна заполнена градиентным цветом, другая — сплошным цветом, протестирована в Chrome 52.0.2743.116 m, Firefox 50.1.0 и IE 11, и обе версии работают. в совершенстве. Другие браузеры не должны создавать больших проблем, любые вопросы приветствуются. Ссылка следующая:

Похожие публикации:

1. Где ярлык css скачать игру
2. За сколько можно изучить html и css
3. Как сделать расстояние между блоками в css
4. Как сделать скошенный блок css

Как поменять стиль input:range?

Доброй ночи! Как сделать, чтоб с одной стороны от ползунка был один цвета, а с другой стороны от ползунка иной цвет? Пример ниже)

• Вопрос задан более трёх лет назад
• 1861 просмотр

Комментировать

Решения вопроса 0

Ответы на вопрос 2

Человек прямоходящий

это не стандартный стиль а значит он изменен через js а это значит что без кода этого ползунка остается только гадать.

Вот моя догадка: ты что-то делаешь не так!

Ответ написан более трёх лет назад

Комментировать

Нравится 1 Комментировать

Как изменить цвет ползунка range css

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

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

В дополнение к атрибутам, общим для всех элементов , range инпуты предлагают следующие атрибуты:

Attribute	Description
list	id элемента , который содержит предопределённые значение (не обязательно)
max	Максимальное допустимое значение
min	Минимальное допустимое значение
step	Шаговый, используемый для пользовательского интерфейса и для проверки

list

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.

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

max

Это значение должно быть больше или равно значению атрибута min .

min

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

Это значение должно быть меньше или равно значению атрибута max .

step

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

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

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 баг 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 19 нояб. 2023 г. 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– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Оформление ползунка input type=»range»

Оформление ползунка input type=»range», вывод его значения и линейки с диапазоном.

Использование стандартного ползунка часто бывает более простым и удобным, чем применение различных библиотек и плагинов, например jQuery UI Slider. Его оформление и функционал уступают не сильно, а вот кол-во кода на странице значительно уменьшается.

В данной теме рассмотрен один из вариантов стилизации такого ползунка.