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


Оглавление (нажмите, чтобы открыть):

Красивый ползунок выбора значения. UI ползунок на сайт

Доброго времени суток. ��

В этой статье рассмотрим как организовать красивый ползунок на сайте, для выбора значения. Для этого будем использовать UI ползунок, что работает с помощью jQuery библиотеки. Ранее я уже писал статью о подобном ползунке, но он был немного ограничен, так как не имел особо анимации. Некоторых это смутило, а у некоторых вызвало ступор, ведь они не могли разобраться с его работой, хотя для меня это загадка, как можно заблудится в трех березах :). Ознакомится с тем ползунком можно здесь — Вывод значения ползунка. В этой же статье, ползунок можно установить без плагина, просто добавить код ползунка себе в форму. Пример того что получится можно посмотреть ниже.

Не будем тянуть резину и быстро разберемся как такой же поставить себе на сайт, в свою форму отправки. Первым делом и должны убедится что к сайту уже подключена библиотека jQuery. Если нет, то это нужно сделать. Можете воспользоваться статей Как и где подключить скрипт?, если не знаете как это сделать.

Теперь очередь библиотеки UI ползунка. Она должна быть размещена после библиотеки jQuery.

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

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

Далее добавляем уже саму HTML разметку. Форма и внутри блок, что и является нашим ползунком.

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

На этом все, спасибо за внимание. ��

Если Вам был полезным мой труд, можете поддержать сайт, обменяться со мной текстовыми ссылками или посмотреть рекламку, что займет 2 минуты 🙂

jQuery UI Sl > Автор: Александр Головко Дата публикации: 16.06.2011

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

Идея, надеюсь, понятна. Перетягиваем ползунки, значения полей input синхронно меняются. Попробуем это реализовать.

Задача

Отыскать кроссбраузерное решение на js для интерфейса выбора диапазона. Требования:

  • инпуты и ползунки связанны (изменение значения одних тут же отражается на других);
  • гибкость стилизации (все должно выглядеть по дизайну).

Решение

Будем использовать плагин jQuery UI Slider. Сам по себе он просто создает ползунок, но подружить его с инпутами не составит труда.

Итак, вначале давай представим, что инпутов нет, и посмотрим, как работает сам плагин.

Что качать?

  • библиотеку jquery
  • jquery.ui-slider.js (24.33 Kb) ядро UI + сам слайдер.

Быстрый старт

В CSS добавляем правила для стилизации ползунка. Подробнее об этом ниже.

В HTML создаем элемент, который плагин заменит на ползунок и присваиваем ему id:

Инициализируем ползунок скриптом:

А теперь подробнее

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

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

Настройки

При инициализации плагина можно задать его параметры:

Название параметра Описание Тип данных Значение по-умолчанию
disabled Отключает (true) или включает (false) слайдер. boolean false
animate Определяет, будет ли ползунок передвигаться в точку плавно, когда пользоваль щелкает на точку на полосе. Также может принимать значение string представляющая одну из трех скоростей на выбор («slow», «normal», или «fast») или число миллисекунд, определяющее продолжительность анимации (например, 1000). boolean, string, int false
max Максимальное значение слайдера. Number 100
min Минимальное значение слайдера. Number
orientation Определяет ориентацию шкалы: слева направо или снизу вверх. Возможные значения: «horizontal», «vertical». String horizontal
range Если выставлено в true, на слайдере будет двуа ползунка и диапазон между ними, который можно стилизовать. Два других значения это «min» и «max». Значение «min» создает диапазон от минимума шкалы до ползунка. Значение «max» создает диапазон от ползунка до максимума шкалы. boolean, string false
step Определяет шаг слайдера. Полный диапазон шкалы (max − min) должен равномерно делится на шаг. Number 1
value Определяет значение слайдера, если есть только однин ползунок. Если имеется более одного ползунка, определяет значение первого ползунка. Number
values Эта опция может использоваться для указания нескольких ползунков. Если range имеет значение true, значений «values» должно быть 2. Array null

События


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

create Событие возникает в момент создания ползунка
start Событие возникает в момент, когда пользователь начинает двигать ползунок.
slide Событие происходит при каждом перемещения мыши во время прокрутки. Используйте ui.value (слайдеры с одним ползунком), чтобы получить текущее значение ползунка, $(..).slider(«value», index), чтобы получить значение ползунка для слайдеров с несколькими ползунками.
change Событие происходит при остановке прокрутки или если величина изменяется программным способом (посредством метода value). Принимает аргументы event и ui. Используйте event.orginalEvent, чтобы определить, изменилось ли значение с помощью мыши, клавиатуры или программно. Используйте ui.value (слайдеры с одним ползунком), чтобы получить текущее значение ползунка, $(this).slider(«values», index), чтобы получить значение ползунка для слайдеров с несколькими ползунками.
stop Событие возникает в момент, когда пользователь закончил двигать ползунок.

Методы

Вызов этих функций позволяет повлиять на работу ползунка, налету изменив его параметры. Делается это с помощью конструкции .slider(), например вот так:

destroy Удаляет функционал ползунка, возвращая элемент к первоначальному состоянию.
disable Отключает слайдер.
enable Включает слайдер.
option Получает или устанавливает любую опцию слайдера. Если значение не указано, будет выступать в качестве получателя. Синтаксис: .slider(«option», optionName , [value])
option Устанавливает сразу несколько опций слайдера путем предоставления опций объекта. Синтаксис: .slider( «option», options )
widget Возвращает элемент .ui-slider.
value Устанавливает или возвращает значение слайдера. Для слайдеров с одним ползунком.
values Устанавливает или возвращает значение слайдера. Для слайдеров с несколькими ползунками или с диапазоном.

Настройка стилей

Вообще-то стилизация элементов jQuery UI (одним из которых является данный слайдер) происходит путем выбора понравившейся темы и загрузки с официального сайта готового CSS. Лично меня такой подход не устраивает совершенно. Поэтому я выбрал из ихнего (очень избыточного, если использовать только слайдер) CSS только нужный код, который здесь и привожу с комментариями.

Некотоые из этих правил можно объединить, так как плагин щедро награждает элементы множеством классов. Например, мой изначальный

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

Добавляем связанные инпуты

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

При инициализации слайдера используем события stop и slide — первое обеспечит корректное значение в момент остановки ползунка, а второе придаст интерактивности (значение инпута будет меняться в реальном времени, синхронно движению ползунка).

Код обоих событий одинаков — берем текущее значение с помошью метода .slider(«values»,X) и помещаем в нужный инпут:

Осталось организовать обратную связь. Учим ползунок перемещаться, если пользователь вводит значение в инпут. Тут можно использовать событие keypress, чтобы ползунок реагировал на каждую нажатую клавишу или событие change, если хотим, чтобы изменение вступало в силу после завершения ввода и ухода из поля. Дело вкуса.

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

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

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

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

Кроссбраузерная стилизация полосы прокрутки (ScrollBar) на jQuery

Знаю, что многим стандартная полоса прокрутки на сайте не нравится – скучная, не вписывается в общую стилистику сайта. Сегодня же я покажу, как с помощью небольшой библиотеки jQuery под названием «Nicescroll» можно исправить положение.

1. Первым делом скачайте архив в конце статьи и содержимое, загрузите на ваш сайт по FTP.

2. Далее в шаблоне вашего сайта, перед закрывающим тегом

Ползунок с двумя значениями html. Стилизация и создание скриптов для ползунков

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

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

Задача

Отыскать кроссбраузерное решение на js для интерфейса выбора диапазона. Требования:

  • инпуты и ползунки связанны (изменение значения одних тут же отражается на других);
  • гибкость стилизации (все должно выглядеть по дизайну).

Решение

Будем использовать плагин jQuery UI Slider. Сам по себе он просто создает ползунок, но подружить его с инпутами не составит труда.

Итак, вначале давай представим, что инпутов нет, и посмотрим, как работает сам плагин.

Что качать?

  • (24.33 Kb) ядро UI + сам слайдер.


Быстрый старт

Инициализируем ползунок скриптом:

А теперь подробнее

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

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

Настройки

При инициализации плагина можно задать его параметры:

Название параметра Описание Тип данных Значение по-умолчанию
disabled Отключает (true) или включает (false) слайдер. boolean false
animate Определяет, будет ли ползунок передвигаться в точку плавно, когда пользоваль щелкает на точку на полосе. Также может принимать значение string представляющая одну из трех скоростей на выбор («slow», «normal», или «fast») или число миллисекунд, определяющее продолжительность анимации (например, 1000). boolean, string, int false
max Максимальное значение слайдера. Number 100
min Минимальное значение слайдера. Number
orientation Определяет ориентацию шкалы: слева направо или снизу вверх. Возможные значения: «horizontal», «vertical». String horizontal
range Если выставлено в true, на слайдере будет двуа ползунка и диапазон между ними, который можно стилизовать. Два других значения это «min» и «max». Значение «min» создает диапазон от минимума шкалы до ползунка. Значение «max» создает диапазон от ползунка до максимума шкалы. boolean, string false
step Определяет шаг слайдера. Полный диапазон шкалы (max − min) должен равномерно делится на шаг. Number 1
value Определяет значение слайдера, если есть только однин ползунок. Если имеется более одного ползунка, определяет значение первого ползунка. Number
values Эта опция может использоваться для указания нескольких ползунков. Если range имеет значение true, значений «values» должно быть 2. Array null

События

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

create Событие возникает в момент создания ползунка
start Событие возникает в момент, когда пользователь начинает двигать ползунок.
slide Событие происходит при каждом перемещения мыши во время прокрутки. Используйте ui.value (слайдеры с одним ползунком), чтобы получить текущее значение ползунка, $(..).slider(«value», index), чтобы получить значение ползунка для слайдеров с несколькими ползунками.
change Событие происходит при остановке прокрутки или если величина изменяется программным способом (посредством метода value). Принимает аргументы event и ui. Используйте event.orginalEvent, чтобы определить, изменилось ли значение с помощью мыши, клавиатуры или программно. Используйте ui.value (слайдеры с одним ползунком), чтобы получить текущее значение ползунка, $(this).slider(«values», index), чтобы получить значение ползунка для слайдеров с несколькими ползунками.
stop Событие возникает в момент, когда пользователь закончил двигать ползунок.

Методы

Вызов этих функций позволяет повлиять на работу ползунка, налету изменив его параметры. Делается это с помощью конструкции.slider(), например вот так:

destroy Удаляет функционал ползунка, возвращая элемент к первоначальному состоянию.
disable Отключает слайдер.
enable Включает слайдер.
option Получает или устанавливает любую опцию слайдера. Если значение не указано, будет выступать в качестве получателя. Синтаксис: .slider(«option», optionName , )
option Устанавливает сразу несколько опций слайдера путем предоставления опций объекта. Синтаксис: .slider(«option», options)
widget Возвращает элемент.ui-slider.
value Устанавливает или возвращает значение слайдера. Для слайдеров с одним ползунком.
values Устанавливает или возвращает значение слайдера. Для слайдеров с несколькими ползунками или с диапазоном.

Настройка стилей

Вообще-то стилизация элементов jQuery UI (одним из которых является данный слайдер) происходит путем выбора понравившейся темы и загрузки с официального сайта готового CSS. Лично меня такой подход не устраивает совершенно. Поэтому я выбрал из ихнего (очень избыточного, если использовать только слайдер) CSS только нужный код, который здесь и привожу с комментариями.

Некотоые из этих правил можно объединить, так как плагин щедро награждает элементы множеством классов. Например, мой изначальный

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

Добавляем связанные инпуты

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

При инициализации слайдера используем события stop и slide — первое обеспечит корректное значение в момент остановки ползунка, а второе придаст интерактивности (значение инпута будет меняться в реальном времени, синхронно движению ползунка).

Код обоих событий одинаков — берем текущее значение с помошью метода.slider(«values»,X) и помещаем в нужный инпут:

Осталось организовать обратную связь. Учим ползунок перемещаться, если пользователь вводит значение в инпут. Тут можно использовать событие keypress, чтобы ползунок реагировал на каждую нажатую клавишу или событие change, если хотим, чтобы изменение вступало в силу после завершения ввода и ухода из поля. Дело вкуса.

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

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

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

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

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

Рис. 1. Вид ползунка в браузерах

Синтаксис создания ползунка следующий.

Здесь min — минимальное число в диапазоне (по умолчанию 0), max — максимальное число (по умолчанию 100), step — шаг изменения чисел (по умолчанию 1), value — текущее значение. По умолчанию value вычисляется по формуле:

Если значение max меньше, чем значение min , то value равно min .

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

Независимо от минимального и максимального числа ширина ползунка остаётся одинаковой.

Сами ползунки редко применяются в «чистом» виде, поскольку не обеспечивают необходимую обратную связь с пользователем, а вот в сочетании с JavaScript это становится мощным и удобным элементом интерфейса. В примере 1 с помощью ползунка изменяется размер изображения, такая возможность часто используется в различных фотогалереях.

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


6 октября 2014 | Опубликовано в css | 6 Комментариев »

Ползунок — это новый способ ввода информации, введенный в 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. Это то, с чем мы еще разбираемся.

Заключение

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

Автор урока Thoriq Firdaus

Ползунок UI

Материал из JQuery

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

Обработчики событий, происходящие на ползунках, будут получать 2 параметра: стандартный объект события и дополнительный объект (назовем его ui) со следующими полями:

ui.value — текущее значение ползунка. ui.handle — DOM-элемент выполняющий роль рукоятки ползунка. Этот элемент создается автоматически, при инициализации плагина (при создании, этому элементу присваивается класс 'ui-slider-handle').

В ползунке может быть любое количество рукояток. Если их больше одной, то вместо поля value нужно использовать values, который будет хранить массив значений (по одному на каждую рукоятку).

Стилизация ползунка Range до манипулятора.

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

Все было бы прекрасно, если бе не одно НО. Как только меняешь максимально значение отличное от 100, всё это дело сразу же ведет в разные стороны.

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

2 ответа 2

Вам необходимо соблюдать пропорции и js и css, т.е. когда вы изменяете max в input , надо также изменять в css:

-там где 50%(пропорционально)
и в js:


  • там где n (пропорционально)

к примеру, если изменить параметр max на 400:

За изменение цвета отвечает вот этот скрипт:

Если Вы внимательно на него посмотрите, то увидите, что параметр n в нём предполагает соответствие процентам. Когда у вас range от 0 до 100, то 1 пункт равен одному проценту, и всё работает Но как только вы меняете, например, на 200, то n — это уже в 2 раза больше процентов. А если 50, то в два раза меньше.

То есть надо тогда в скрипте писать ‘+n/2+’ или ‘+n*2+’

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

Похожие

Подписаться на ленту

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

дизайн сайта / логотип © 2020 Stack Exchange Inc; пользовательское содержимое попадает под действие лицензии cc by-sa 4.0 с указанием ссылки на источник. rev 2020.11.9.35389

О input[type=range], параметре multiple и как сделать, чтобы всё работало

Обычно, если вам требуется сделать блок с ползунком или даже что покруче — с выбором диапазона, то используем готовый плагин из набора jQuery UI — slider().

На ПК всё отлично работает, мы даже не заморачиваемся, меняем стили и радуемся функционалом.
Затык приходит в том моменте, когда проект — это мобильная версия чего-либо на html и обязательно вместо поля для ввода значений нужно использовать ползунок — ну потому что удобней или же по другим каким-то причинам.

Тут и возникает проблема. На windows phone 8 работает, на android 4.1 версии нет, да и iphone 4 тоже отказался нормально работать.
Первым делом нашел, что есть в сети, это noUiSlider, причем довольно хорошо работает и везде, но у меня только при первом скроллинге ползунка, потом всё лагает, пердит и дрыгается. Пришлось отказаться, причину лагов не выяснил, да и времени разбираться не было.
egorkhmelev.github.io/jslider сразу отказался работать на мобильниках, jqxslider хорошо, но тормоза.

Короче суть поста: это взять нативный слайдер:

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

С помощью нехитрых манипуляций со стилями и скриптами получается что-то вроде:

Инициализация

Параметры плагина

stylesheet — дополнительный класс для слайдера.

Параметры элемента

min — минимальное значение
max — максимальное значение
step — шаг слайдера (по умолчанию 1, этот параметр можно опустить)
value — начальное и конечное значения ползунков через запятую. При отсутствии запятой начальное и конечное равняются данному значению. При отсутствии значения начальное и конечное равны минимальному и максимальному значению соответственно.

События

Событие onCreate возникает при инициализации слайдера.
Событие onSlide возникает при движении одного из ползунков.
Событие onChange возникает при завершении движения одного из ползунков.

Добавлю, что вот эти чудесные белые вертикальные две полосочки на ползунках работают только в webkit движках. Возможно, общее решение — это добавить background ползункам с уже нарисованными полосами.

А вот как изменять стили ползунков — в интернете уже полно статей и данной публикации не касается напрямую. Дерзайте!

Индикаторы (теги progress и meter), ползунок | CSS и HTML

Тег progress HTML

progress (w3.org) показывает процент завершения работ. Например, степень заполнения формы или загрузки страницы.

Как изменить его стиль CSS, например, для резиновой вёрстки:

Тег meter HTML

meter (w3.org) определяет цифровое значение в неком диапазоне. В зависимости от положения на шкале линия будет принимать разный цвет.

110 120 » value=»110″> 110
50 120 » value=»50″> 50
-100 120 » value=»-100″> -100
-200 120 » value=»-200″> -200

атрибут описание по умолчанию
min самое низкое значение
low с min до low — диапазон низких значений; с low до high — диапазон средних значений min
high с low до high — диапазон средних значений; с high до max — диапазон высоких значений max
max самое высокое значение 1.0
optimum определяет предпочтительную окраску диапазонов. Для того, чтобы понять о чём речь, поменяем его значение (max+min)/2
value текущее значение

Стилизацию можно посмотреть у css-tricks.com.

Ползунок HTML

(w3.org) в отличии от предыдущих двух элементов может изменяться самим пользователем благодаря перетаскиванию ползунка курсором мышки.

атрибут описание по умолчанию
value текущее значение (max+min)/2
min самое низкое значение
max самое высокое значение 100
step шаг изменения значения 1
list нет поддержки браузерами

Его можно стилизовать благодаря псевдоэлементам CSS и сделать интерактивные динамические штучки на сайте благодаря JavaScript. Например, здесь получилось наглядно и просто продемонстрировать действие свойства border-image-slice.

Сss стили скроллов или ползунков на jQuery

Простые лаконичные css стили скроллбаров на js. Иногда на сайте нужно оформить красиво какой то блок с контентом фиксированной ширины и высоты, а стандартные браузерные стили скролла не всегда подходят сайту или просто не вливаются в дизайн. Итогда на помощь приходят css стили scroll — ов на jQuery. Работает в любом браузере, каких то косяков в этом скрипте я не заметил. Долго искал достойное оформление блоков со скроллом и вроде нашел!

В данной сборке представлены 4 вида стилистики скроллов. Единственный минус этих ползунков — скролл мыши у них не работает, приходится зажимать ползунок и вести его вверх или вниз. Также исправно работают стрелки вверх и вниз, с помощью которых можно читать текст внутри этого фиксированного блока. Думаю любому web-разработчику приходилось сталкиваться с поиском своих стилей для скроллбаров. Если у кого есть интересные статьи, пожалуйста поделитесь с ней ссылкой в комментариях. Всего наилучшего!

Скачать (12.02 Kb) Demo Отблагодарить Эрика

Мастер Йода рекомендует:  Началась работа по интеграции Facebook Messenger и Instagram Direct
Добавить комментарий