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

О 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 ползункам с уже нарисованными полосами.

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

Источник

Ползунок html + CSS

Здравствуйте уважаемые начинающие веб-мастера. Ещё один Оригинальный эффект CSS.

Сейчас будем делать красивый ползунок для сайта. Простой-то ползунок сделать просто. Достаточно ввести в html код тег input с атрибутом type=»range», как любой браузер поймёт, что на экране нужно вывести ползунок.

Вот пожалуйста, вставляем в любом месте

Невзрачненько. Чтоб сделать этот бегунок красивым, можно применить css, но не всё так просто. Дело в том, что каждый браузер отображает бегунок по своему.

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

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

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

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

Итак, код красивого бегунка:

input[type=range] <
-webkit-appearance : none ;
margin : 50px ;
width : 20% ;
>

input[type=range]:focus <
outline : none ;
>

input[type=range]::-webkit-slider-runnable-track <
height : 8px ;
cursor : pointer ;
animate : 0.2s ;
border : 1px solid #575656 ;
background : #AD020D ;
>

input[type=range]::-moz-range-track <
height : 8px ;
cursor : pointer ;
animate : 0.2s ;
box-shadow : 1px 1px 1px #000 ;
background : #AD020D ;
border : 1px solid #575656 ;
>

input[type=range]::-moz-range-thumb <
box-shadow : 1px 1px 1px #000 ;
border : 1px solid #000000 ;
height : 36px ;
width : 16px ;
border-radius : 40%/60% ;
background : #ffffff ;
cursor : pointer ;
>
/style >
/head >
body >
input type =» range » value =» 0 » max =» 100 «/>
/body >
/html >

А вот и он сам, работает, можно подвигать:

Ещё один пример, в котором линия, по которой двигается бегунок, является индикатором.

input[type=range] <
-webkit-appearance : none ;
appearance : none ;
width : 260px ;
height : 20px ;
padding : 0 ;
box-shadow : inset 0 0 0 2px #2D7CFA ;
background : #AD020D ;
overflow : hidden ;
>

/* Линия-ндикатор для Firefox */

input[type=range]::-moz-range-track <
background : none ;
border : none ;
>

/* ползунок в Firefox */

Результат, так же рабочий:

Чтоб метод тыка и матерного слова, не свёлся у Вас к простому копированию, а был осмысленным и, значит, более плодотворным, я убрал из кода обеих ползунков участок, предназначенный для IE.

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

Желаю творческих успехов.

Перемена

Мужчина упал с десятого этажа, и не разбился. Так целиком и похоронили.

Источник

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

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

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

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

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

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

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

CSS шаблон

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

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

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

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

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

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

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

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

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

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

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

Источник

Спаренный range input с двумя ползунками. Есть ли варианты получше чем в теле вопроса?

Идеальный вариант два input[type=range] связанные между собой.
Как чистый JS, так и jQuery 1+ варианты

8KB на единственный инпут многовато

А так, только двигаться в сторону ангуляр-директив и плагинов для других библиотек-фреймов

Денис Инешин:
>чего например не хватает Ion.RangeSlider до идеальности

+++ БЕМизировать стили: 1 елемент = класс + модификатор (опционильно)
+++ сборка на gulp-grunt

Денис Инешин: Хозяин-барин. Но аудиторию это точно сужает. Потому что если лет 5 назад jQuery по-любому был подключен на 99% сайтов, то сегодня уже заметен процент сайтов, где от него отказались. Либо просто за ненадобностью (потому что ванильного достаточно), либо ушли на более продвинутые вещи (всякие ангуляры и так далее).

А тянуть jQuery ради одного контрола. Я например не хочу. И поэтому я выбираю всегда noIUSlider вместо вашей библиотеки (а остальном безусловно симпатичной) или Owl Carousel вместо Slick или Fotorama (которые тоже очень круты, но увы).

Кстати, если уход с jQuery точно не планируется, то тогда я бы посоветовал хотя бы проверить совместимость библиотеки с Zepto. Когда деваться совсем некуда, я все равно стараюсь подменить jQ на неё, потому что весит в несколько раз меньше. И часть jQ-библиотек могут работать с Зепто из коробки или после небольшого напилинга. А вот ту же Фотораму мне не удалось заставить подружиться за разумное время.

Денис Инешин, подскажите пожалуйста, как сейчас лучше всего реализовать draggable элемент по оси X в пределах одного DIV. Визуально это вертикальная линия, поэтому range не подходит, но работать должно так же.

Может посоветуете хорошее готовое решение на js?

А вообще:
1. Двигаем мышкой и записываем ее координаты
2. Передаем эти координаты в requestAnimationFrame
3. Меняем позицию свой полоски при изменении этих координат.

Источник

Ползунок диапазонов jQuery UI Slider

Настройка, события, методы, вывод данных и классы ползунка диапазонов jQuery UI Slider

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

1. Установка

В итоге получим это:

2. Настройки

animate

Определяет, будет ли ползунок передвигаться плавно при клике на ползунке.

true или false, «fast» (быстро) или «slow» (медленно), или число в миллисекундах

По умолчанию: — false

classes

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

Подробнее об использовании классов на сайте learn.jquery.com

disabled

Отключает true или включает false слайдер.

По умолчанию: — false

Максимальное значение ползунка.

Минимальное значение ползунка.

orientation

Горизонтальная «horizontal» или вертикальная «vertical» ориентация слайдера

По умолчанию: — «horizontal»

range

Определяет диапазон ползунка

По умолчанию: — false

Шаг значений ползунка, который должен быть кратным разнице между максимальным и минимальным значением шкалы.

value

Начальное значение ползунка, если он один

values

Начальные значения ползунков, если их два, например [ 10, 20 ]

По умолчанию: — null

3. Методы

Вызов этих функций позволяет быстро влиять на работу ползунка и получать с него данные

$( «.selector» ).slider( «destroy» );

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

$( «.selector» ).slider( «disable» );

$( «.selector» ).slider( «enable» );

Возобновляет работу ползунка.

$( «.selector» ).slider( «option», < настройки >);

Устанавливает одну или несколько настроек

Получает значение настройки

Получает значения всех настроек, например: option.min, option.max и т.д.

$( «.selector» ).slider( «value», 20 );

Устанавливает нужное значение для рукоятки

Получает значение рукоятки

$( «.selector» ).slider( «values», [ 55, 105 ] );

Устанавливает нужные значение для рукояток

$( «.selector» ).slider( «values», 0, 105 ] );

Устанавливает нужное значение для рукоятки 0

Получает значения рукояток

4. События

change ( event, ui )

Событие, которое происходит при изменении значения ползунка

create ( event, ui )

Событие, которое запускается при создании ползунка

slide ( event, ui )

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

start ( event, ui )

Событие, которое происходит, когда пользователь начинает перетаскивать рукоятку ползунка

stop ( event, ui )

Событие, которое происходит, когда пользователь заканчивает перетаскивать рукоятку ползунка

Подробнее о настройках, методах и событиях jQuery UI Slider на сайте api.jqueryui.com

5. Вывод значений ползунка

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

Для слайдера из 2-х рукояток:

6. Добавление значений к форме

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

7. Оформление

Чтобы придать ползунку другой вид, нужно добавить свой стиль ниже оригинального jquery-ui.css (как в примере) или редактировать оригинальный

Другие способы оформления можно поглядеть в отдельной статье: Варианты оформления jQuery UI Slider

8. Описание классов

Ниже представлена таблица с классами слайдера и за что отвечает каждый из них

Класс	Описание
.ui-slider	дорожка слайдера
.ui-slider-horizontal	стили для горизонтального слайдера
.ui-slider-vertical	стили для вертикального слайдера
.ui-slider-handle	стили для рукоятки
.ui-slider-range	стили для выбранного диапазона
.ui-slider-range-min	стили для выбранного диапазона с настройкой range: «min»
.ui-slider-range-max	стили для выбранного диапазона с настройкой range: «max»
.ui-state-disabled	стили для заблокированного слайдера (disabled: true)

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

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

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

Плавное переключение радиокнопок

Плавное перемещение подсветки активной радиокнопки

Фильтр контента по буквам на jQuery

Небольшой скрипт на jQuery реализующий поиск и фильтрацию контента по буквам

Добавить комментарий:

Комментарии:

У вас неплохой сайт) Спасибо за информацию,как разработчик/чуток дизайнер могу выразить свою благодарность за внимание к мелочам(анимашки и переходы на js-сине) 🙂

Приветствую всех.
Помоги с решением моей микро задачи )))
Есть вертикальный слайдер, есть min и max — 0 и 100.
Задача, сделать чтобы ползунок никогда не доходит до своего минимума и максимума, а останавливался допустим на значениях 5 и 95 и на полосе прокрутки при максимальных и минимальных значения всегда оставались маленькие «хвостики»
Это реально сделать?

Если min стоит 0, то он и будет идти на 0, если нужно 5 минимальное, то нужно поставить 5. Соотв. и max тоже.
А чтобы хвостик оставался можно сделать псевдо шкалу, которую можно растянуть и оформить как угодно.

Псевдо шкала? А как её сделать? В двух словах ))

Шкала слайдера прозрачная, а под ней альтернативная, нужного размера и оформления.

Спасибо за идею, сделал ))
И тут же вопросик возник ), при адаптации только у меня не работает ползунок, двигать можно только нажатием на линию скроллинга?

Это на тачпадах? Для етого патч есть

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

А нужкн ли для такой задачи вообще ползунок?
Он как бы изначально же подразумевает значение ОТ и ДО
А у нас это значение не известно, оно может быть и 5 и 5 000 000.
Тут, как мне кажется, нужно просто сделать поле для ввода этого значения.

Пдскажите, как использовать несколько слайдеров на одной странице?
В таком варианте не работает

У вас во втором слайдере перепутаны значения max и min в его настройках

Статья весьма крутая! Мне нужна подсказка, как сделать один ползунок при передвижении которого меняется два разных значения?

Если я правильно понял, то второе значение должно по формуле ставится?

Источник