Как сделать ползунок js
Обновлено: 07.07.2024
. Многие из вас скажут, что нет ничего проще, достаточно установить фиксированную высоту блока и задать его свойству overflow-y значение auto или scroll . Действительно, этого вполне достаточно, но, в большинстве случаев, полосы прокрутки нарушают дизайн веб-страницы.
В этой статье я расскажу вам, как сделать прокрутку контента в блоке и сам скроллбар c помощью JavaScript используя событиt scroll . Подробно рассмотрим HTML-вёрстку, CSS и сам код на чистом JavaScript.
Составим техническое задание на создание прокрутки контента внутри блока:
- Прокрутка должна осуществляется колёсиком мыши при наведении на выбранный блок или перетаскиванием ползунка скроллбара.
- Блок должен иметь кастомный скроллбар с высотой ползунка, зависящей от размера контента внутри блока.
- При прокрутке контента в блоке использовать стандартное событие scroll.
- На странице может быть несколько блоков с прокруткой контента.
- Ширина и высота блоков с прокруткой не должна влиять на работу скрипта.
HTML-разметка блока с прокруткой.
HTML-код блока с прокруткой контента:
Кратко рассмотрим назначение каждого элемента:
container Родительский элемент, задаёт ширину, высоту и дизайн блока с прокруткой контента. viewport Область просмотра, которая определяет границы контента, за которыми контент не виден. Кроме этого, вьюпорт обрезает и делает невидимой дефолтную полосу прокрутки контейнера contentBox . contentBox Контейнер, в котором размещён и будет прокручиваться контент. Именно у этого контейнера стандартная полоса прокрутки будет заменена на кастомную.
Обратите внимание — показ дефолтной полосы прокрутки мы запретили, а HTML-вёрстку кастомного скроллбара не сделали. Он будет формироваться JS-скриптом в случае необходимости, т. е., если высота контента больше высоты контейнера contentBox . Такое решение предоставляет большую гибкость в применении, отсутствует зависимость от высоты контента. Это удобно, когда на странице несколько таких блоков с разным наполнением контентом.
Таблица стилей для блока с прокруткой.
Ниже я приведу только те стили, которые непосредственно относятся к блоку с прокруткой контента.
Очень важно.
Для уменьшения размера таблицы стилей, я не буду приводить свойства с вендорными префиксами, обеспечивающими кроссбраузерность. Не забывайте прописывать их при реализации своих проектов.
Начинаем писать JavaScript для блока с прокруткой контента.
Первое, что мы сделаем, это создадим анонимную самозапускающуюся функцию, внутри которой и будет расположен наш код. Нужно взять за правило ограничивать область видимости скрипта, чтобы исключить конфликты с другими JS-скриптами подключенными к странице.
При написании JS-скрипта мы будем использовать конструкцию Class . Это позволит создать несколько экземпляров блоков с прокруткой на одной странице.
Создание экземпляров блоков с прокруткой контента.
В-первую очередь, создадим коллекцию блоков, в которых может понадобиться прокрутка контента. Далее, с помощью метода for. of переберём полученную коллекцию, при этом мы выполним следующие действия:
- создадим экземпляр текущего блока, используя конструктор класса ScrollBox ;
- создадим HTML-вёрстку скроллбара, если высота контента в текущем блоке больше высоты родительского контейнера.
- зарегистрируем обработчики событий.
Весь дальнейший JS-код мы будем писать внутри конструкции class ScrollBox < . >.
Прежде всего рассмотрим конструктор класса ScrollBox . Конструктор инициализирует ряд объектов и переменных, содержащих информацию об экземпляре блока прокрутки. В качестве аргумента конструктор принимает объект блока с контентом, экземпляр которого создаётся в данный момент.
Кроме проинициализированных переменных, нам необходимо добавить константу, являющуюся приватным статическим полем. В данной константе будет храниться минимальная высота ползунка полосы прокрутки.
Конструктор, кроме инициализации объектов и переменных, вызывает функцию init() . Алгоритм работы данной функции:
Сравнивает высоту контента с высотой вьюпорта. Если высота контента окажется меньше или равна высоте вьюпорта, то функция прекращает работу, т. к. необходимость в прокрутке отсутствует.
Определяет максимальную прокрутку контента.
Вычисляет соотношение между высотами вьюпорта и контента.
Вызывает функцию createScrollbar() для создания полосу прокрутки.
Вызывает функцию registerEventsHandler() регистрирующую обработчики событий для управления прокруткой как вращением колёсика мыши, так и перетаскиванием ползунка скроллбара.
Рассмотрим код функции init() и комментарии к нему:
Создание скроллбара для блока с прокруткой контента.
Как я писал выше, скроллбар и его ползунок формируются с помощью функции createScrollbar() .
Рассмотрим алгоритм работы данной функции:
Используя встроенный в JavaScript метод document.createElement , создаёт новые DOM-элементы DIV , из которых будут сформированы полоса прокрутки и ползунок.
Присваивает созданным элементам классы — scrollbar и scroller соответственно.
Вставляет созданные элементы во вьюпорт.
Получает DOM-объект ползунка полосы прокрутки, вычисляет и устанавливает его высоту.
Высота ползунка зависит от соотношения высот вьюпорта и контента (коэффициент ratio ), при этом чем больше высота контента, тем меньше высота ползунка полосы прокрутки.
Код функции createScrollbar() и комментарии к нему:
Теперь необходимо зарегистрировать обработчики событий, которые будут управлять прокруткой контента внутри вьюпорта.
Запомните, это очень важно.
При использовании метода addEventListener теряется контекст вызова — this , который ссылается на текущий объект. Используя встроенный в JavaScript метод bind , можно напрямую передать контекст вызова в функцию обработчика события.
Регистрировать мы будем следующие события:
scroll вращение колёсика мыши, при этом курсор должен быть над вьюпортом; mousedown нажатие на левую кнопку мыши, когда курсор находится на ползунке; mousemove перемещение мыши по полосе прокрутки и документу в целом, т. е., если при перемещении курсор покинет область полосы прокрутки, перемещение ползунка не прервётся; mouseup отпускание левой кнопки мыши, при этом курсор может находиться над любой частью документа.
Код функции registerEventsHandler() и комментарии к нему:
Как видно из кода, событие mousedown привязывается к элементу scroller . А вот события mousemove и mouseup привязаны к объекту document , т. е. событие может наступить при положении курсора над любой частью страницы. Такое поведение предусмотрено при дефолтной прокрутке контента внутри блока при назначении ему стиля overflow-y: scroll . Логично, что я постарался сохранить его.
Управление прокруткой контента внутри блока по событию ‘scroll’.
При возникновении события scroll прокрутка будет осуществляться стандартными методами встроенными в браузер. Нам потребуется только изменить положение ползунка.
Изменять положение ползунка будем меняя значение свойства top пропорционально изменению значения текущей прокрутки контента с учётом, полученного ранее, коэффициента ratio . Давайте ещё раз посмотрим на функцию, которая вызывается при наступлении события scroll :
Далее я расскажу вам, как перетаскивается ползунок по полосе прокрутки и как меняется прокрутка контента в зависимости от текущего положения ползунка.
Прокрутка контента перемещением ползунка скроллбара.
Перетаскивание ползунка начинается с наступления события mousedown . При обработке этого события запоминается координата по оси Y — e.clientY , которая будет считаться точкой начала перемещения ползунка. Кроме этого, выставляется флаг сигнализирующий о нажатии левой кнопки мыши.
JS-код, реализующий это, находится в функции, являющейся вторым параметром регистратора обработчика события mousedown . Напомню этот код, чтобы вам не листать страницу:
За перетаскивание ползунка отвечает функция drop , которая вызывается при возникновении события mousemove . Давайте рассмотрим алгоритм работы этой функции:
Проверяет установку флага нажатия левой кнопки мыши pressed . Если флаг не установлен, то прекращает свою работу.
Вычисляет величину перемещения мыши, как разницу между координатой старта this.start и текущей координатой курсора по оси Y — e.clientY .
Изменяет положение бегунка на величину перемещения курсора, меняя его смещение по вертикали путём изменения CSS-свойства top .
Ограничивает перемещение ползунка верхней и нижней границей вьюпорта.
Прокручивает контент на величину пропорциональную перемещению ползунка.
Устанавливает координату Y начала движения мыши равной текущей координате Y.
Прежде чем начнём писать код функции drop , давайте подробнее разберём п. 4 представленного алгоритма.
Ранее нами было получено максимально возможное смещение ползунка от верхней границы вьюпорта — scrollerMaxOffset , вычисленное как разность высоты вьюпорта и высоты ползунка. Давайте посмотрим на рисунок:
Из рисунка видно, что если попытаться ещё увеличить смещение ползунка, то его нижняя часть выйдет за пределы вьюпорта. Другими словами, сумма высоты ползунка и его смещения не должна превышать высоту вьюпорта.
Для того, чтобы ползунок не уходил за верхнюю границу вьюпорта, необходимо контролировать, чтобы его смещение от этой границы было больше или равно нулю.
Теперь можно представить полный код функции drop :
if ( totalheightScroller > = this . viewportHeight ) this . scroller . style . top = maxOffsetScroller + 'px' ;
При отпускании левой кнопки мыши, наступает событие mouseup и перетаскивание ползунка скроллбара прекращается. При этом флаг pressed получает значение false .
Напомню этот код, чтобы вам не листать страницу:
На этом изучение прокрутки контента в блоке можно считать законченным. Посмотреть пример различных вариантов прокрутки блока, скачать HTML-вёрстку и полный JS-код, Вы можете по ссылкам, указанным в начале страницы.
Комментарии
- Комментарии должны содержать вопросы и дополнения по статье, ответы на вопросы других пользователей.
Комментарии содержащие обсуждение политики, будут безжалостно удаляться. - Для удобства чтения Вашего кода, не забываейте его форматировать. Вы его можете подсветить код с помощью тега
А есть такое для горизонтального скролла?
Можно архив не rar пожалуйста)
Спасибо автору за прекрасный урок.
В секцию fn.registerEventsHandler = function(e) // document resize (добавил в самом низу)
// возможно ли отказаться от window, заменив его на document?
window.addEventListener(‘resize’, () => this.refreshScrollbar();
>);
>;
ниже функции
fn.createScrollbar = function() …
>;
добавил функцию
fn.refreshScrollbar = function() this.content = this.viewport.querySelector(‘.content’);
this.viewportHeight = this.viewport.offsetHeight;
this.contentHeight = this.content.scrollHeight;
// возможная максимальная прокрутка контента
this.max = this.viewport.clientHeight — this.contentHeight;
// соотношение между высотами вьюпорта и контента
this.ratio = this.viewportHeight / this.contentHeight;
// устанавливаем его высоту
this.scroller = this.viewport.querySelector(‘.scroller’);
this.scrollerHeight = parseInt(this.ratio * this.viewportHeight);
this.scrollerHeight = (this.scrollerHeight Егор Ответить 8 августа 2019 в 11:31
Также замечен недостаток, что при resize прячется индикатор прокрутки, если конента много и ранее была прокрутка вниз.
аффтор убей себя об стену. это двумя строчками делается, губошлёп.
Для этого нужно зарегистрировать touch-события touchstart, touchmove, touchend и при их срабатывании вызывать функции, соответствующие событиям мыши mousedown, mousemove, mouseup.
Скроллер — фигня.
Если контент прокручиваемый контент будет очень большой, начнет заметно подтормаживать.
Не нужно придумывать прокрутку за браузер, у вас все-равно не выйдет его оптимизировать лучше, если только не будете весь свой контент на canvas рисовать.
А сказать браузеру, что содержимое элемента нужно прокрутить, можно изменяя свойство scrollTop и scrollLeft соответственно, привязав его к рукописному скроллеру.
И если вешаете событие при помощи addEventListener, особенно на документ, удаляйте его после использования removeEventListener, особенно если вешаете на такое событие как mousemove.
Добрый день!
Вопрос со стороны автоматизации.
Можно ли такой блок скроллить как-то, например, скриптом?
Столкнулся с подобным на странице, есть блок, не факт, что такой, но похожий, внутри элемент, находящийся за видимой областью экрана, нужно его вытащить.
При использовании рядовых методов Selenium WebDriver (scrollIntoView, scrollTo) скроллится вся страница, но не блок
А нельзя шаг прокрутки привязать к якорям? Чтобы прокрутка блоками выполнялась?
Случай JavaScript: ползунок для настройки цвета элемента
Поделитесь случаем DOM, используйте ползунок для управления цветом элемента на странице
HTML-страница:
Простой стиль:
js часть:
Цвет по умолчанию при открытии страницы:
После настройки:
Интеллектуальная рекомендация
Анализ протокола Zigbee: механизм маршрутизации
Функция метода Java setAccessible
В Java значение поля в классе сущности может быть получено посредством отражения. Если для метода setAccessible поля не задано значение true, проверка безопасности доступа будет выполняться при вызове.
Header Server Hot развертывание подробное подробное описание (по обновлению действий / на рамках деактивации)
Сцены: Общие серверы (такие какtomcat，jbossПодождите, после запуска мы также должны дополнительно изменить код Java или код JSP. В общем, это вступит в силу после изменения перезагрузки. Но если тепло.
Всем привет, недавно пришлось делать калькулятор для одного сайта, в качестве ползунков был использован jquery ui slider, чуть ниже приведу код вызова. На компе все получилось без проблем, так как использовал этот ползунок не один раз, но впервые для адаптивных сайтов. В адаптиве, как вы поняли, этот ползунок со шкалой работать не захотел. Точнее он работает и запускается, просто на touch экране его нельзя никуда переместить.
Также, в этой статье, я покажу как сделать ползунок со шкалой на jquery ui slider своими руками.
jQuery UI slider mobile не работает в адаптиве на touch экране
Создаем адаптивный ползунок со шкалой на jquery ui slider
Я покажу примеры кода jquery ui slider в одном html файле + отдельно вынесу CSS чтобы он не мешал, думаю для вас не составит труда сделать аналогично но в разных файлах под сайтом на WP.
Для работы ползунка нам понадобится 3 яваскрипт файла, вот так я их подключаю в примере:
Если будете делать это на WP то первый файл у вас подключен всегда по умолчанию, а второй можно подключить с помощью встроенной функции:
Но не принципиально.
Также, мы подключаем отдельным файлом стили:
без них наш jquery ui slider mobile ползунок работать не будет.
И теперь выкладываю собственно сам хтмл код примера:
также, выкладываю CSS код примера:
Проверить работоспособность кода вы сможете ниже, там же будет кнопка скачать пример.
Демо пример ползунка со шкалой ui slider mobile
Скин рабочего примера находится ниже в кликабельном изображении, которое будет открыто в лайтбоксе:
Посмотреть работу ползунка со шкалой на базе jquery ui slider mobile вы можете нажав на кнопку демо (пример будет открыть во всплывающем окне), для скачивания файла достаточно нажать на кнопку скачать:
На этом у меня все, надеюсь этот пример вам помог и вы с радостью поделитесь этой статьей с друзьями в соц. сетях:
Всем привет!
Сделать ползунок в HTML – не проблема, для многих сделать это – проще простого. А вот оформить и красиво вывести значение ползунка умеют не все.
Так вот, в сегодняшней статье я расскажу, как создать ползунок, как вывести результат и как оформить ползунок.
В результате получится вот такое:
Заметьте, что ручка ползунка всегда находится посредине, а специальным атрибутом это можно изменить, впрочем, не только это.
. Потому что, когда отключаешь стандартный вид, то она пропадает, а с ней было бы интересней.
Заранее спасибо!
Здравствуйте, Евгений!
Если можно, опубликуйте Ваш готовый код в комментариях, я посмотрю и подскажу.
Элементы с типом range позволяют пользователю определить числовое значение, которое должно быть в пределах указанного промежутка. Однако, точное значение должно быть не слишком важно. Обычно они представляет собой слайдер или контроллер, но не текстовое поле как number. Так как этот виджет неточен, его не следует использовать, в случае, если важно установить точное значение .
Если используемый браузер не поддерживает тип 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 . Алгоритм определения значения по умолчанию:
Если предпринята попытка установить значение меньше минимального, то оно примет значение атрибута min. Аналогично, попытка установить значение больше максимального, приведёт к установлению значения равного атрибуту max.
Дополнительные атрибуты
В дополнение к атрибутам, общим для всех элементов , range инпуты предлагают следующие атрибуты:
| Attribute | Description |
|---|---|
| list | id элемента , который содержит предопределённые значение (не обязательно) |
| max | Максимальное допустимое значение |
| min | Минимальное допустимое значение |
| step | Шаговый, используемый для пользовательского интерфейса и для проверки |
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 , введённый в элемент, меньше этого значения, то элемент не проходит проверку ограничения. Если значение атрибута 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 атрибут определяем ориентацию слайдера. Значение horizontal , значит что слайдер будет отображён горизонтально, а vertical - что вертикально .
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, вы можете, используя:
Настройка детализации значения
По умолчанию, степень детализации равна 1, тем самым показывая, что значение всегда является целым числом. Вы можете изменить атрибут step контроля степени детализации. Например, если вам нужно значение между 5 и 10, с точностью до двух знаков после запятой, вы должны установить значение step на 0.01:
Если вы хотите принять любое значение, независимо от разрядности, вы можете указать значение any для атрибута step :
Этот пример позволяет пользователю выбрать любое значение между 0 и π без ограничений на разрядность.
Добавление хэш-меток и лейблов
Спецификация HTML даёт браузерам некоторую гибкость при представлении диапазонных контроллеров. Нигде эта гибкость не проявляется больше, чем в области хэш-меток и, в меньшей степени, лейблов. Спецификация описывает как добавлять кастомные точки контроллера диапазона, используя атрибут list и элемент , но не имеет требований или рекомендаций по стандартизации хэш-меток и лейблов по длине контроллера.
Макеты контроллера диапазона
Так как браузеры имеют эту гибкость, и на сегодняшний день ни один из них не поддерживает все возможности, определённые HTML, представляем несколько макетов, показывающих как вы можете получить на macOS в браузере, который их поддерживает.
Недекорированный контроллер диапазона
Этот результат вы получите, если не укажите атрибут list , или браузер не будет его поддерживать.
Контроллер диапазона с хэш-метками
Контроллер диапазона, использующий атрибут list , указывающий ID , который определяет серию хэш-меток на контроллере. Их одиннадцать, одна на 0% и на каждой отметки 10%. Каждая точка представлена с помощью элемента с его набором value значений диапазона, при котором должна быть нарисована метка.
Контроллер диапазона с хэш-метками и лейблами
Вы можете добавить лейблы в свой контроллер диапазонов, добавив атрибут label элементам , соответствующим значениям, на которых вы бы хотели видеть лейблы.
Примечание: В настоящее время ни один браузер полностью не поддерживает эти возможности. 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
Рассмотрим контроллер диапазона:
| Screenshot | Live sample |
|---|---|
 |
Это горизонтальный контроллер (по крайне мере на большинстве основных браузеров, другие могут отличаться).
Standards
Следуя спецификации, сделать его вертикальным также просто как добавить CSS, чтобы изменить размеры контроллера, чтобы его высота оказалась больше ширины:
Результат
| Screenshot | Live sample |
|---|---|
 |
К сожалению, большинство браузеров сейчас не поддерживают вертикальные контроллы напрямую.
transform: rotate(-90deg)
Но вы, всё же, можете сделать вертикальный контролл используя горизонтальный контролл. Самый простой способ - использовать CSS: применяя transform для поворота элемента на 90 градусов. Посмотрим:
В HTML нужно добавить обёртку вокруг -
Теперь нам нужно немного CSS. Во-первых, это CSS для самой обёртки; это указание дисплея и размеров для правильного расположения на странице; по сути, он резервирует область страницы для слайдера, так, чтобы можно было поместить повёрнутый слайдер в зарезервированном пространстве, не создавая беспорядка.
Затем информация о стиле элемента в зарезервированном пространстве:
Размеры контроллера это набор из 150 пикселей длины и 20 пикселей высоты. Маржинги установлены на 0 и transform-origin (en-US) смещается в середину пространства, на котором вращается слайдер; поскольку слайдер имеет ширину 150 пикселей, он вращается через прямоугольник по 150 пикселей с каждой стороны. Смещение начала координат на 75px по каждой оси означает, что мы будем вращаться вокруг центра этого пространства. Наконец, мы поворачиваем против часовой стрелки на 90°. Результат: инпут range, который вращается таким образом, что максимальное значение находится сверху, а минимальное снизу.
| Screenshot | Live sample |
|---|---|
 |
appearance property
Свойство appearance имеет нестандартное значение slider-vertical , которое делает слайдер вертикальным.
Используем тот же HTML что и в предыдущем примере:
Берём только те инпуты что имеют тип range:
orient attribute
В Firefox, реализовано нестандартное свойство orient .
Используем тот же HTML что и в предыдущем примере и добавляем атрибут со значением vertical :
writing-mode: bt-lr;
Свойство writing-mode может быть использовано для специальных эффектов
Используем тот же HTML что и в предыдущем примере:
Берём только те инпуты что имеют тип range, меняем writing mode с default на bt-lr , или bottom-to-top и left-to-right:
Все вместе
Каждый из вышеперечисленных примеров работает в своём браузере, мы попробуем объединить все вместе чтоб добиться кроссбраузерности решения:
Оставим orient атрибут со значением vertical для Firefox:
Берём только те инпуты что имеют тип range, меняем writing mode с default на bt-lr , или bottom-to-top и left-to-right, для Edge и Internet Explorer, и добавляем -webkit-appearance: slider-vertical для всех -webkit-based браузеров:
Читайте также: