jQuery ползунок выбора диапазона. Слайдер диапазона цен


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

В статье jQuery UI Slider — ползунок выбора диапазона мы рассмотрели простой вариант ползунка, когда масштаб в пределах шкалы повсюду одинаков.

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

Задача

Требуется реализовать ползунки выбора цен с такими дополнительными условиями:

  • инпуты и ползунки связанны (изменение значения одних тут же отражается на других);
  • масштаб в пределах шкалы не одинаков: левая половина шкалы от 0 до 1000, правая — от 1000 до 40000;
  • шаг изменения цены в пределах шкалы не одинаков: слева пусть он будет равен 10 единиц, справа — 100;

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

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

Решение

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

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

Будем его этому учить? Э, нет. Это без меня! Уж очень сильно придется лопатить чужой код. Неблагодарное это занятие. Мы пойдем другим путем.

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

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

Основная идея

Плагин не умеет менять масштаб, ну и шут с ним. Фишка в том, что настоящее значение ползунка никто никогда не увидит. Циферки-то отображаются в инпутах! И программер потом возьмет значения цен, на которые рассчитывает пользователь, именно из инпутов!

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

Немного математики

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

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

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

Так как я сам себе рисовал ползунок, у меня все получилось совсем красиво. Левая и правая части одинаковы и занимают по 100 пикселей. Соответственно масштабные коэффициенты получились: слева 10, справа 390.

Далее все просто. Реализуем логику. Если значение ползунка меньше точки изменения масштаба в пикселях (у меня это 100), то умножаем его на первый масштабный коэффициент (10) иначе, вычитаем длину первого участка (в пикселях), умножаем на второй коэффициент (390) и прибавляем стоимоть первого участка (1000):

Осталось учесть изменение шага. Помнишь, при постановке задачи мы договаривались, что шаг изменения цены слева будет 10, а справа 100. Все для удобства пользователя.

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

Опять таки, если точек изменения масштаба дизайнер нарисовал больше одной, нужно будет соответственно увеличить количество ветвей в структуре if-else.

Для второго ползунка делаем такие же расчеты (для экономии места этот момент пропускаю — все абсолютно аналогично).

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

Тут все с точностью до наоборот. Если значение в инпуте меньше точки изменения масштаба (теперь уже не в пикселях, а в стоимости, у меня 1000), то делим значение на масштабный коэффициент первого диапазона. Если больше, то вычитаем цену первого диапазона (1000), делим на масштабный коэффициент второго диапазона (390) и прибавляем длину (в пикселях) первого диапазона (100):

Теперь, чтобы окончательно все стало понятно, предлагаю еще раз посмотреть демо-пример, где весь этот код стоит на своих местах.

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

Ложка дегтя

Из-за того, что мы задали обработчики событий slide и stop (см. код примера) при отпускании ползунка часто значение в инпуте немного (в пределах шага) меняется.


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

Ползунок UI

Материал из JQuery

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

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

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

Топ-пост этого месяца:  ReactJS Material UI. Урок 13. Добавление элементов

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

Виджет Sl >

Виджет Sl >метод 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, можно создавать и вертикальные слайдеры. Простой пример приведен ниже:

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

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

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

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

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

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

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

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

Создание диапазонного слайдера

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

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

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

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

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

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

Методы виджета Slider

Метод Описание
slider(«destroy») Возвращает базовый элемент в первоначальное состояние
slider(«disable») Отключает слайдер
slider(«enable») Включает слайдер
slider(«option») Устанавливает одно или несколько значений свойств
slider(«value», значение) Получает и устанавливает значение для обычного слайдера
slider(«values», значения) Получает и устанавливает значения для диапазонного слайдера
Топ-пост этого месяца:  R-Money — масштабная партнерская программа для заработка в рунете (странах СНГ) на студентах и

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

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


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

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

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

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

События виджета Slider

Событие Описание
create Происходит в момент создания слайдера
start Происходит, когда пользователь начинает перемещать рукоятку слайдера
slide Происходит при любом движении мыши, приводящем к перемещению слайдера
change Происходит, когда пользователь перестает перемещать рукоятку слайдера или когда значение слайдера изменяется программным путем
stop Происходит, когда пользователь перестает перемещать рукоятку слайдера

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

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

Форум

Справочник

Поиск по форуму
Расширенный поиск
К странице.

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

Смотрю существующие плагины, там везде надо указывать шаг. А шаг у меня, как видите переменчив. Есть какое-нибудь решение для моей задачи? Спасибо

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

Умный фильтр. Ползунок для диапазона цен.

Работаю на 12,5-версии Битрикса. Делаем интернет-магазин. Подключил умный фильтр — вроде все работает, но для диапазона цен нету ползунков. Подскажите как их включить?

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

взял этот скрипт с http://jqueryui.com/slider/#range и поменял нужные места

шаблон умного фильтра:

Код

ну и сам диапазон поставил внизу шаблона:

Вы получившийся javascript код смотрели на странице. На сколько я помню $arResult[«ITEMS»] — это массив, тогда надо писать $arResult[«ITEMS»] [0] [«BASE»][«VALUES»][«MIN»][«VALUE»] — нулевой индекс это для примера.

Вы в шаблоне подключили необходимые библиотеки (jQuery, jQuery UI) а также css стили?

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

Узнайте, как создавать пользовательские ползунки диапазона с помощью CSS и JavaScript.

Default:

Square:

Round:

Image:

Создание ползунка диапазона

Шаг 1) добавить HTML:

Пример

Шаг 2) добавить CSS:

Пример

.slidecontainer <
width: 100%; /* Width of the outside container */
>


/* The slider itself */
.slider <
-webkit-appearance: none; /* Override default CSS styles */
appearance: none;
width: 100%; /* Full-width */
height: 25px; /* Specified height */
background: #d3d3d3; /* Grey background */
outline: none; /* Remove outline */
opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
-webkit-transition: .2s; /* 0.2 seconds transition on hover */
transition: opacity .2s;
>

/* Mouse-over effects */
.slider:hover <
opacity: 1; /* Fully shown on mouse-over */
>

/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
.slider::-webkit-slider-thumb <
-webkit-appearance: none; /* Override default look */
appearance: none;
width: 25px; /* Set a specific slider handle width */
height: 25px; /* Slider handle height */
background: #4CAF50; /* Green background */
cursor: pointer; /* Cursor on hover */
>

.slider::-moz-range-thumb <
width: 25px; /* Set a specific slider handle width */
height: 25px; /* Slider handle height */
background: #4CAF50; /* Green background */
cursor: pointer; /* Cursor on hover */
>

Шаг 3) добавить JavaScript:

Создайте ползунок динамического диапазона для отображения текущего значения с помощью JavaScript:

Пример

var sl );
var output = document.getElementById(«demo»);
output.innerHTML = slider.value; // Display the default slider value

// Update the current slider value (each time you drag the slider handle)
sl > output.innerHTML = this.value;
>

Круглый ползунок

Для создания круглого маркера ползунка используйте border-radius свойство. Совет: Установите высоту ползунка на другое значение, чем ползунок, если вы хотите неравные высоты (15пкс vs. 25пкс в этом примере):

Пример

.slider <
-webkit-appearance: none;
width: 100%;
height: 15px;
border-radius: 5px;
background: #d3d3d3;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
>

.slider::-webkit-slider-thumb <
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
border-radius: 50%;
background: #4CAF50;
cursor: pointer;
>

.slider::-moz-range-thumb <
width: 25px;
height: 25px;
border-radius: 50%;
background: #4CAF50;
cursor: pointer;
>

Иконка слайдер/изображение

Чтобы создать значок или изображение маркера ползунка, используйте background свойство и вставьте URL-адрес изображения:

Ion.RangeSl > Автор Антон

Ion.RangeSlider – Вот это чудо мне удалось найти на просторах интернета. Классный, удобный, нет огромного количества настроек, легко настраивается, хоть настроек у него мало, но и их вполне хватает!

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

Особенности плагина

  • Кроссбраузерность: Google Chrome, Mozilla Firefox 3.6+, Opera 12+, Safari 5+, Internet Explorer 8+
  • Поддерживает устройства с touch-экраном (iPhone, iPad, Nexus, etc.)
  • Поддержка скинов – встроено 3 скина
  • Неограниченное кол-во слайдеров на одной странице без существенных потерь производительности и конфликтов между ними
  • Два режима работы с 1 или 2 ползунками
  • Поддержка отрицательных и дробных значений
  • Возможность редактировать шаг
  • Поддержка собственного диапазона значений
  • Автоматически генерируемая сетка
  • Отключаемые элементы интерфейса (мин. и макс. значение, текущие значение, сетка)
  • Постфиксы и префиксы для указания единиц измерения ($20, 20 € и т.п.)
  • Дополнительный постфикс для максимального значения (например $0 — $100+)

  • Воможнось улучшить читабельность больших цифр (например 10000000 -> 10 000 000)
  • Слайдер пишет свое значение прямо в value исходного поля input, что позволяет вставить сладер прямо внутрь любой формы
  • Любой параметр слайдера можно так же задать через data-атрибут (например data-min=”10″)
  • Слайдер поддерживает параметр disabled, позволяет делать слайдер неактивным
  • Слайдер поддерживает внешние методы (update и remove), позволяющие управлять слайдером уже после создания
  • Для продвинутых пользователей есть поддержка функций обратного вызова (onLoad, onChange, onFinish). Слайдер передает свои значения в эти функции первым аргументом в виде объекта

Подключение

link rel = «stylesheet» href = «ion.rangeSlider.css» >
link rel = «stylesheet» href = «normalize.min.css» >

script src = «ion.rangeSlider.min.js» > / script >

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

Параметры

Параметр По умолчанию Описание параметра
type “single” Не обязательный параметр, позволяет выбрать тип слайдера, может принимать значение single – для одиночного слайдера или double – для двойного слайдера
min 10 Не обязательный параметр, автоматически устанавливается из атрибута value базового поля input. Например если value=”10;100″, то примет значение 10
max 100 Не обязательный параметр, автоматически устанавливается из атрибута value базового поля input. Например если value=”10;100″, то примет значение 10
from min Не обязательный параметр, по умолчанию равен значению min. Позволяет задать стартовую позицию слайдера “ОТ”
to max Не обязательный параметр, по умолчанию равен значению max. Позволяет задать стартовую позицию слайдера “ДО”
step 1 Не обязательный параметр, задает шаг слайдера
prefix Не обязательный параметр, добавляет текст до всех значений. Например prefix – “$” модифицирует значение “100” в “$100”
postfix Не обязательный параметр, добавляет текст после всех значений. Например postfix – ” €” модифицирует значение “100” в “100 €”
maxPostfix Не обязательный параметр, добавляет для максимального значения. Например maxPostfix – “+” модифицирует значение “100” в “100+”
hasGrid false Не обязательный параметр, включает сетку ниже слайдера (высота увеличивается на 20px и это можно настроить через CSS)
gridMargin Не обязательный параметр, устанавливает отсуп от края сетки до края слайдера
hideMinMax false Не обязательный параметр, отключает поля Min и Max
hideFromTo false Не обязательный параметр, отключает поля From и To
prettify true Не обязательный параметр, позволяет разделять длинные цифры пробелами, например 10 000 вместо 10000
disable false Визуально отключает слайдер
values null Массив предустановленных значений: [a, b, c] и т.п.

Callback

Параметр По умолчанию Описание параметра
onLoad Функция обратного вызова, вызывается один раз при инициализации слайдера или после обновления через метод Update
onChange Функция обратного вызова, вызывается каждый раз при смене состояния слайдера, возвращает объект, содержащий параметры слайдера
onFinish Функция обратного вызова, вызывается один раз при смене состояния слайдера, когда работа слайдера завершена. Возвращает объект, содержащий параметры слайдера

Описание данных передаваемых в функцию обратного вызова:

В любую функцию обратного вызова передается объект с данными слайдера:

Создание слайдера (подробно)

Пример слайдера, запущенного с параметрами:

Слайдер с параметрами можно также инициализировать используя атрибуты data-* у тэга input:

Публичные методы

Обновление слайдера, метод update:

как реализовать слайдер ценового диапазона

Я реализую слайдер диапазона в шаблоне начальной загрузки:

Значение диапазона отображается в текстовом поле с rangeprimary id rangeprimary .

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

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

Ion Range Slider — отличный вариант, требующий только JQuery. Очень настраиваемый и отлично работает в Bootstrap. Также имеет отличную документацию.

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

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

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

Делаем Jquery UI slider (ползунок).

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

Попробуйте «поиграть» с ним ниже.

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

Поэтому, берите это на вооружение и применяйте где это вам понадобиться.

Создание такого ползунка станет возможным при подключении к вашей веб-странице двух библиотек:

1) Библиотеки Jquery

Скачать ее можно здесь

2) И дополнения к библиотеке Jquery UI (User Interphase) или пользовательский интерфейс.

Скачать ее можно здесь

Вот код, который я использовал для создания такого ползунка:

Вот стили CSS, которые позволят сделать сам ползунок слайдера круглым.

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

Яндекс Метрика и Google Analytics. Цели, события, отчеты.

Умный фильтр. Ползунок для диапазона цен.

Работаю на 12,5-версии Битрикса. Делаем интернет-магазин. Подключил умный фильтр — вроде все работает, но для диапазона цен нету ползунков. Подскажите как их включить?

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

взял этот скрипт с http://jqueryui.com/slider/#range и поменял нужные места

шаблон умного фильтра:

Код

ну и сам диапазон поставил внизу шаблона:

Вы получившийся javascript код смотрели на странице. На сколько я помню $arResult[«ITEMS»] — это массив, тогда надо писать $arResult[«ITEMS»] [0] [«BASE»][«VALUES»][«MIN»][«VALUE»] — нулевой индекс это для примера.

Вы в шаблоне подключили необходимые библиотеки (jQuery, jQuery UI) а также css стили?

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