Ползунок выбора значения на jquery.

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

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

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

Powerange — слайдер прайсов

Powerange — слайдер диапазона, его создатели черпали вдохновение в iOS 7 и телесериале «Могучие рейнджеры ». Слайдер легко настраивается, как с помощью CSS , так и JavaScript .

Демо | Скачать

Flat jQuery Price Slider

Этот JQuery слайдер для выбора диапазона цен может пригодиться при реализации ваших веб-проектов. Кроме того он полностью бесплатный.

Демо | Скачать

3D HTML 5 jQuery Price Range Slider

3D HTML 5 jQuery Price Range Slider базируется на концепциях Эрика Дейнера.

Скачать

noUiSlider

noUiSlider — это простой слайдер диапазона без наворотов. Он использует хорошо структурированные скрипты и стилевые методы. Вы можете сами убедиться в том, насколько noUiSlider компактный, но его минимальные возможности прекрасно подходят для мобильных устройств, в том числе iPhone , iPad , Android-устройств , а также компьютеров и планшетов на Windows (Phone ) 8 .

Скачать

Basic slider

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

Демо | Скачать

Free BootStrap Component Slider

Исходный код

Free Minimal jQuery Slider

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

Исходный код

jQuery Slider plugin

JQuery Slider — это простой в использовании и многофункциональный JQuery -плагин, который поддерживается всеми сенсорными устройствами на базе WebKit , такими как iPhone / IPod / IPad и Android . Ниже вы можете найти ссылки на демо-версию плагина и документацию.

Демо | Скачать

jQuery Mobile Price Slider

Чтобы добавить виджет слайдера на страницу, введите новый атрибут HTML5 type=”range” . Просто укажите значение (текущее ), минимальное и максимальное значение атрибутов. Фреймворк сам сконфигурирует эти атрибуты, чтобы настроить слайдер.

Исходный код

HostSlide Hosting Plan & Pricing Slider – Premium

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

Слайдер создан на основе JavaScript и поддерживается всеми основными браузерами. Это позволяет просто и быстро использовать данный слайдер для вывода ценовых диапазонов и характеристик тарифных планов хостинга.

Демо |Скачать

Перевод статьи «9 Free Jquery Price Range Sliders » был подготовлен дружной командой проекта .

Виджет Slider

Виджет Slider позволяет создавать слайдеры из элементов HTML-документа. Для создания слайдеров используется метод slider() , как показано в примере ниже. Слайдеры применяются в тех случаях, когда пользователю необходимо предоставить возможность выбирать значения, лежащие в некотором заданном диапазоне:

jQuery UI $(function() { $("#slider").slider(); });

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

Настройка виджета Slider

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

Свойства виджета Slider Свойство Описание

animate	Значение true разрешает анимацию слайдера после выполнения пользователем щелчка на шкале вне рукоятки. Значение по умолчанию - false
disabled	Значение true соответствует отключенному состоянию слайдера. Значение по умолчанию - false
max	Определяет максимальное значение для слайдера. Значение по умолчанию - 100
min	Определяет минимальное значение для слайдера. Значение по умолчанию - 0
orientation	Определяет ориентацию слайдера (горизонтальную или вертикальную)
range	Используется совместно со свойством values для создания слайдера с несколькими рукоятками
step	Определяет шаг перемещения рукоятки вдоль шкалы между минимальным и максимальным значениями
value	Определяет значение, представляемое слайдером
values	Используется совместно со свойством range для создания слайдера с несколькими рукоятками

Значения min и max не входят в число допустимых. Таким образом, если вы установите min равным 0, a max - равным 100, то пользователь сможет выбирать значения от 1 до 99.

Изменение ориентации слайдера

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

... #hslider, #vslider { margin: 10px} $(function() { $("#hslider").slider({ value: 35 }); $("#vslider").slider({ orientation: "vertical", value: 35 }) });

В этом примере создаются два слайдера, для одного из которых свойство orientation задано равным vertical. В документ добавлен элемент style, устанавливающий поля для слайдеров, чтобы они располагались на некотором расстоянии друг от друга. Размером и положением слайдеров (как и любого другого виджета jQuery UI) можно управлять, применяя стиль к базовому элементу (именно поэтому для создания слайдеров лучше всего подходят элементы div, которыми легко манипулировать с помощью стилей CSS).

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

В этом примере слайдеры создаются и настраиваются раздельно. Мы можем более эффективно использовать базовую функциональность jQuery, переписав код так, как показано в примере ниже:

$(function() { $("#hslider, #vslider").slider({ value: 35, orientation: "vertical" }).filter("#hslider").slider("option", "orientation", "horizontal"); });

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

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

Анимация слайдера

Свойство animate позволяет задать плавное перемещение рукоятки слайдера из ее текущего положения в точку шкалы, в которой пользователь выполнил щелчок (в отличие от непосредственного перемещения рукоятки с помощью мыши). Можно разрешить анимацию, предусмотренную по умолчанию, установив для свойства animate значение true. Кроме того, можно задать скорость анимации с помощью предустановленных строковых значений fast и slow или путем указания времени (в миллисекундах), в течение которого должна длиться анимация. Соответствующий пример приведен ниже:

$(function() { $("#slider").slider({ animate: "fast" }); });

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

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

... #slider { margin: 10px} span { color:red; } $(function() { $("#slider").slider({ values: , range: true, create: displaySliderValues, slide: displaySliderValues }) function displaySliderValues() { $("#lower").text($("#slider").slider("values", 0)); $("#upper").text($("#slider").slider("values", 1)); } }); Нижняя граница: Верхняя граница:

Чтобы создать диапазонный слайдер, необходимо установить значение свойства range равным true и задать в качестве значения свойства values массив, содержащий начальные значения нижней и верхней границ диапазона. (Когда используется обычный слайдер, применяется свойство value, а когда используется диапазонный слайдер, применяется свойство values.) В данном примере в качестве нижней и верхней границ установлены соответственно значения 35 и 65. Результат представлен на рисунке:

Здесь в сценарий добавлена функция-обработчик для событий create и slide. О событиях, поддерживаемых слайдером, мы еще будем говорить, но сейчас я просто хотел продемонстрировать, как определить позиции рукояток диапазонного слайдера. Для этого используется метод values(), которому передается индекс интересующей вас рукоятки.

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

Использование методов виджета Slider

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

Пример использования методов value и values для управления слайдером из программы приведен ниже:

jQuery UI #slider, #rangeslider, *.inputDiv { margin: 10px} label {width: 80px; display: inline-block; margin: 4px} $(function() { $("#slider").slider({ value: 50, create: function() { $("#slideVal").val($("#slider").slider("value")); } }); $("#rangeslider").slider({ values: , range: true, create: function() { $("#rangeMin").val($("#rangeslider").slider("values", 0)); $("#rangeMax").val($("#rangeslider").slider("values", 1)); } }) $("input").change(function(e) { switch (this.id) { case "rangeMin": case "rangeMax": var index = (this.id == "rangeMax") ? 1: 0; $("#rangeslider").slider("values", index, $(this).val()) break; case "slideVal": $("#slider").slider("value", $(this).val()) break; } }) }); Мин. значение: Макс. значение: Значение индикатора:

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

Здесь к элементам input, выбранным с помощью jQuery, применяется метод change(), в результате чего всякий раз, когда изменяется значение в одном из полей, вызывается указанная функция. Внутри этой функции с помощью оператора switch организуется ветвление по значению атрибута id измененного элемента, и с помощью метода value или values устанавливаются позиции его рукояток.

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

Использование событий виджета Slider

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

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

$(function() { $("#slider").slider({ value: 50, create: setInputsFromSlider, slide: setInputsFromSlider, stop: setInputsFromSlider }) function setInputsFromSlider() { $("#slideVal").val($("#slider").slider("value")); } $("#rangeslider").slider({ values: , range: true, create: setInputsFrom2Slider, slide: setInputsFrom2Slider, stop: setInputsFrom2Slider }) function setInputsFrom2Slider() { $("#rangeMin").val($("#rangeslider").slider("values", 0)); $("#rangeMax").val($("#rangeslider").slider("values", 1)); } $("input").change(function(e) { switch (this.id) { case "rangeMin": case "rangeMax": var index = (this.id == "rangeMax") ? 1: 0; $("#rangeslider").slider("values", index, $(this).val()) break; case "slideVal": $("#slider").slider("value", $(this).val()) break; } }) });

Чтобы все это могло работать с другими событиями, я выделил необходимые инструкции в отдельные функции (setInputsFromSlider() и setInputsFrom2Slider()) и использовал их для обработки событий create, slide и stop. Теперь рукоятки слайдера перемещаются при вводе новых значений в полях, а значения в полях ввода обновляются при перемещении рукояток. Вид окончательного документа в окне браузера показан на рисунке, а полное представление о том, как работает данный пример, можно получить только в процессе реального взаимодействия со слайдером:

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

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

Задача

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

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

Решение

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

Проверено в:

IE 6-8
Firefox 4
Opera 11
Safari
Chrome

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

Что качать?

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

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

Подключаем библиотеки:

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

jQuery("#slider").slider({ min: 0, max: 1000, values: , range: true });

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

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

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

Настройки

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

Название параметра Описание Тип данных Значение по-умолчанию disabled animate max min orientation range step value values

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

События

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

JQuery("#slider").slider({ stop: function(event, ui) { alert("Ползунок переехал на новую позицию!"); } });

Перечень событий:

create start slide change stop

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

Событие возникает в момент, когда пользователь начинает двигать ползунок.

Событие происходит при каждом перемещения мыши во время прокрутки. Используйте ui.value (слайдеры с одним ползунком), чтобы получить текущее значение ползунка, $(..).slider("value", index), чтобы получить значение ползунка для слайдеров с несколькими ползунками.

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

Событие возникает в момент, когда пользователь закончил двигать ползунок.

Методы

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

JQuery("#slider").slider("values",0, 100);

Перечень методов:

destroy disable enable option option widget value values

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

Отключает слайдер.

Включает слайдер.

Получает или устанавливает любую опцию слайдера. Если значение не указано, будет выступать в качестве получателя. Синтаксис: .slider("option", optionName , )

Устанавливает сразу несколько опций слайдера путем предоставления опций объекта. Синтаксис: .slider("option", options)

Возвращает элемент.ui-slider.

Устанавливает или возвращает значение слайдера. Для слайдеров с одним ползунком.

Устанавливает или возвращает значение слайдера. Для слайдеров с несколькими ползунками или с диапазоном.

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

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

/* Ширина слайдера */ #slider { width: 200px; } /* Контейнер слайдера */ .ui-slider { position: relative; } /* Ползунок */ .ui-slider .ui-slider-handle { position: absolute; z-index: 2; width: 13px; /* Задаем нужную ширину */ height: 13px; /* и высоту */ background: url(../img/slider.png) no-repeat; /* картинка изображающая ползунок. Или можно залить цветом, задать бордюр и скругления */ cursor: pointer } .ui-slider .ui-slider-range { position: absolute; z-index: 1; font-size: .7em; display: block; border: 0; overflow: hidden; } /* горизонтальный слайдер (сама полоса по которой бегает ползунок) */ .ui-slider-horizontal { height: 3px; /* задаем высоту согласно дизайна */ } /* позиционируем ползунки */ .ui-slider-horizontal .ui-slider-handle { top: -5px; margin-left: -6px; } .ui-slider-horizontal .ui-slider-range { top: 0; height: 100%; } .ui-slider-horizontal .ui-slider-range-min { left: 0; } .ui-slider-horizontal .ui-slider-range-max { right: 0; } /* оформление полосы по которой ходит ползунок */ .ui-widget-content { border: 1px solid #D4D4D4; background: #fff; } /* оформление активного участка (между двумя ползунками) */ .ui-widget-header { border: 1px solid #D4D4D4; background: #f00; } /* скругление для полосы слайдера */ .ui-corner-all { -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; }

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

превращается в

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

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

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

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

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

JQuery("#slider").slider({ min: 0, max: 1000, values: , range: true, stop: function(event, ui) { jQuery("input#minCost").val(jQuery("#slider").slider("values",0)); jQuery("input#maxCost").val(jQuery("#slider").slider("values",1)); }, slide: function(event, ui){ jQuery("input#minCost").val(jQuery("#slider").slider("values",0)); jQuery("input#maxCost").val(jQuery("#slider").slider("values",1)); } });

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

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

JQuery("input#minCost").change(function(){ var value1=jQuery("input#minCost").val(); var value2=jQuery("input#maxCost").val(); if(parseInt(value1) > parseInt(value2)){ value1 = value2; jQuery("input#minCost").val(value1); } jQuery("#slider").slider("values",0,value1); }); jQuery("input#maxCost").change(function(){ var value1=jQuery("input#minCost").val(); var value2=jQuery("input#maxCost").val(); if (value2 > 1000) { value2 = 1000; jQuery("input#maxCost").val(1000)} if(parseInt(value1) > parseInt(value2)){ value2 = value1; jQuery("input#maxCost").val(value2); } jQuery("#slider").slider("values",1,value2); });

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

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

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