В закладки

X

База плагинов jQuery

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

> > Слайдер с ползунками для выбора диапазона на JQuery
-->

28-12-2016

Статьи

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

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

Обзор JQuery слайдеров для выбора числового диапазона. Обычно такие слайдеры используются в интернет-магазинах для фильтрации товаров по цене.

 

Самый знаменитый пример — jquery-ui slider, который стыдно не знать. Однако его стандартных возможностей не всегда хватает, поэтому мы рассмотрим еще несколько решений.

jQRangeSlider jQRangeSlider базируется на jquery-ui, но дополнен новыми фичами и плюшками.

 

Что умеет?

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

Изменять значения можно не только перетаскиванием ползунков, но и с помощью кнопок-стрелок по бокам.

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

Понравилось то, что можно двигать сразу целый диапазон, если «ухватиться» за него и перетащить. Более того, если подключить jquery.mousewheel.js, то это можно делать колесиком мыши.

Помимо числового, поддерживает и временной диапазон.

Есть возможность выставить ограничения на минимальное и максимальное значения. То есть весь диапазон значений может быть от 0 до 100, но опуститься, например, ниже 40 нельзя.

По умолчанию есть 2 темы оформления.

 

Минусы:

Довольно много весит, так как придется подключать еще и ядро jquery-ui. В сумме выходит больше 250кб.

 

Плюсы:

Гибкая настройка с множеством параметров.

Нет проблем с оформлением, в стилях довольно просто разобраться.

На официальном сайте имеется хорошая подробная документация к плагину.

Разработчики уверяют, что плагин нормально работает на устройствах с сенсорными экранами и тестировался на iOS и Android.

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

 

jQuery Slider plugin

Как написано на сайте разработчиков, jQuery Slider — это простой в использовании и многофункциональный JQuery плагин, поддерживающий любые мобильные устройства с сенсорными экранами на базе webkit, такие как iPhone/iPod/iPad и Android.

Возможности этого плагина стандартные. Без лишних примочек, но зато четко выполняет свою задачу.

Что умеет?

Слайдер с одиночным ползунком или выбор диапазона.

Как и в предыдущем примере, ярлычки с числовыми значениями «следуют» за ползунками. Однако здесь использовано интересное решение — когда ползунки находятся слишком близко, подписи объединяются в один блок и разделяются дефисом, чтобы ярлыки не перекрыли друг друга.

В параметрах функции можно настроить отображение линейки с делениями.

Можно выбрать формат подписей.

4 стандартные темы оформления.

Плюсы:

Мало весит.

Минусы:

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

$.noUiSlider noUiSlider своим названием дает понять, что не является потомком jquery-ui slider. И правильно делает, потому что стандартное оформление слайдера очень похоже на jquery-ui.

Краткое описание на официальном сайте:

Легкий, быстро настраиваемый слайдер без наворотов. Поддерживает Google Chrome, Firefox, Opera, Safari и Internet Explorer начиная с 7 версии. Также поддерживает устройства с сенсорными экранами, такие как iPhone, iPad, Windows 8 и Android девайсы.

Что умеет?

Слайдер с одиночным ползунком или выбор диапазона.

Есть возможность сделать вертикальный слайдер.

Имеется режим «Disable», когда изменение значений невозможно.

В режиме «Toggle» можно использовать в качестве чекбокса — вкл или выкл.

Может использоваться в качестве прокрутки для карусели изображений.

Плюсы:

Очень-очень легковесный плагин — менее 3кб. И это очень-очень хорошо.

Минусы:

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

В архиве с исходными материалами совсем нет примеров, только подключаемые файлы. Все примеры и документация на официальном сайте.

Читайте так же:

Здесь нет еще ни одного комментария...

Оставить комментарий

 

Опрос

Какие материалы стоит добавлять на сайт в большей степени?


 

SEO-продвижение

Автоматическое продвижение сайта в TOP.

Если Вы нашли ошибку в тексте, пожалуйста, выделите область и нажмите Ctrl + Enter.

Последняя версия jQuery:

Скачать
v.1.4.1 или v.3.0.0

Небольшое руководство по тому, как скачать самую актуальную версию библиотеки jQuery, а также рекомендации по подключению скрипта.

Популярное за неделю:

Шаблоны:

Подборки интерфейсов:

Архив материалов:

«    Май 2017    »
ПнВтСрЧтПтСбВс
1234567
891011121314
15161718192021
22232425262728
293031 

^