Варианты оформления jQuery UI Slider

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

Установка плагина
  • подключаем библиотеку jQuery версии 1.7+
  • подключаем библиотеку jQuery UI с виджетом Slider
  • подключаем плагин jQuery UI Touch Punch для корректной работы ползунков на тачпадах

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

Вариант 1

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

Вариант 2

Данный пример подходит к большим значениям вводимых данных

Вариант 3

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

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

Вариант 3
Вариант 4

В данном примере со стрелками используется шрифт FontAwesome. Если он не подключен на сайте, нужно в JS заменить стрелки <i class='fa fa-chevron-left'></i> и <i class='fa fa-chevron-right'></i> на другие.

Вариант 5

Последний пример с двумя рукояткамии и полями для ввода данных.

Слайдер сделан таким образом, чтобы нельзя было ввести невозможные значения данных, а именно:

  • Значение первого поля для ввода не может быть больше, чем значение второго и меньше, чем задано настройками
  • Значение второго поля для ввода не может быть меньше, чем значение первого и больше, чем задано настройками
  • Из полей ввода удаляются все символы кроме цифр

Обработка введенных данных и расстановка рукояток происходит, когда форма не в фокусе.

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

Автор: Александр Суханов [ atuin.ru ]

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

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

Ваш комментарий отправлен!

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

  • Олег:

    Если в вариант 5 в окнах ввода проставить значения 5000 то ползунок после этого не передвинуть

    Ответить
  • Евгений:

    Александр, еще хотел уточнить: как сделать сброс выбранных значений в начальные кнопкой без перезагрузки страницы? Заранее спасибо за ответы.

    Ответить
    • Alexander:

      Это сюда: jQuery UI Slider — Методы (Установка значений для рукояток)
      И привязать это на клик по какой нибудь кнопки

      Ответить
      • Евгений:

        Просто начинаю изучать, знаний минимум, поэтому интересуют "живые примеры".

        Ответить
      • Евгений:

        со сбросом по кнопке разобрался

        $("#reset").click( function(){
            $(".polzunok-input-left").val(from); 
        	$(".polzunok-input-right").val(to); 
        	$(".polzunok").slider( "values", [ min, max ] );
        });
        
        Ответить
  • Евгений:

    Интересный слайдер, но при переходе по страницам категории /page/ /page/2/ /page/3/ и т.д. выбранные данные теряются и выставляются начальные значения.
    Как возможно запомнить выставленные данные при переходе по сайту в пределах одной категории?

    Ответить
    • Alexander:

      А для чего нужно такую форму гнать по всем страницам, если не секрет?

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

      Ответить
      • Евгений:

        Фильтр такой нужен для фильтрации пользователем определенного диапазона, например цены (в моем случае километража). Если в выборке получается на несколько десятков позиций, просто неудобно их все просмотреть на странице и приходится делать пагинацию, например по 10 или 20 позиций.
        Насчет куков можно поподробнее? За живой пример дополнительное спасибо

        Ответить
        • Alexander:

          Фильтр такой нужен для фильтрации пользователем определенного диапазона, например цены (в моем случае километража)

          Ну это я думаю не просто так делается…
          Человек фильтрует, далее идет запрос, по нему выводятся соотв. позиции и вместе с ними должны выводиться страницы. Если по фильтрам нашлось, например, 30 позиций, то мы выводим 20, показываем 2 страницы, и ссылка на вторую соотв. получается не /page/2/, а что-то вида /page/2/?cat-1&filter1=10&filter2=20&filter3=30 и т.д.
          И на основе этих данных будет строится вторая страница и соотв. этот фильтр.

          Или каким то другим образом движок строит систему фильтров… Надо от этого отталкиваться думаю, а не просто придумать как ползунок сохранить на месте.

          Ответить
          • Евгений:

            я в ручном порядке добавляю переменные в запрос — все выводится как надо. у меня проблема как вытащить значения ползунков и передать их в php-переменные…
            Если это сделать, то остальное все будет работать как надо.

            Ответить
            • Alexander:

              Ну так сложно судить…
              Если параметрыпередаются и все выводится, то на их основе можно выводить новый скрипт, в котором начальное значение уже другое.

              Ответить
              • Евгений:

                Параметры вывожу в инпутах, но передать их не могу . В этом сложности. Не могу понять как это сделать.

              • Alexander:

                Так если параметры не передаются, как на их основе что то выводится?
                Или "В ручном порядке" — это просто от руки в урл их вписать?

              • Евгений:

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

              • Alexander:

                Напишите завтра в ВК
                Посмотрим что есть и что надо.
                Так проще будет рассказать что куда.

              • Евгений:

                я не пользуюсь соцсетями… если возможно через почту, то мой адрес должны видеть

  • Александр:

    Первый вариант отображается с пустотой внутри кружков(ни нумерации, ни белого фона), может что-то не так со стилями?
    Подключил всё правильно

    Ответить
    • Alexander:

      Скорее всего со стилями, а можно ссылку на результат этот?

      Ответить
      • Александр:

        https://codepen.io/codeine98/pen/JjYxMpw?editors=1100

        Ответить
      • Александр:

        Вопрос снят, нужна была более свежая версия JQuery. Я использовал 2.1.3, а после подключения последней на данный момент (3.5.1) всё отобразилось как на примере.

        Ответить
  • Алексей:

    Чувак, просто СПАСИБО!

    Ответить
    • Alexander:

      Не за что 🙂
      Рад что многим пригодилось

      Ответить
  • Дмитрий:

    Спасибо за статью. Хочу узнать как к примеру в пятый пример добавить знак ₽ после значения стоимости, как я понимаю его нужно в js добавить?

    Ответить
    • Alexander:

      Попробуйте:
      https://atuin.ru/test/slderRUB.js
      Пример:
      https://atuin.ru/test/slderRUB.html

      Ответить
  • Константин:

    Спасибо! Классно и быстро прикрутил, но вот вопрос — По варианту 5, как доработать чтобы пробелы между тысячами вставлялось?
    15 000 000

    Ответить
    • Alexander:

      Попробуйте:
      https://atuin.ru/test/toLocaleString.js

      Ответить
  • Максим:

    У вас написано:
    Обработка введенных данных и расстановка рукояток происходит по клику на любом месте страницы.

    а как сделать чтобы данные и рукоятки обрабатывались мгновенно при вводе?

    Ответить
    • Alexander:

      Я так понял это про 5 вариант?

      Я вначале так и сделал, чтобы мгновенно данные менялись, но тут есть 1 проблема.
      Если первая рукоятка стоит, например на 600 и вы начинаете вводить данные во вторую (хотите ввести 1000), то написав 1, рукоятка сразу улетает на 600 (т.к. 1 быть не может).
      И соотв, вписать 1000 во вторую рукоятку вы не сможете.

      Ответить
  • Юрий:

    Спасибо за примеры, очень часто возникает потребность в 5 варианте, при создании фильтров.

    Ответить