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

Использование стандартного ползунка <input type="range"/> часто бывает более простым и удобным, чем применение различных библиотек и плагинов, например jQuery UI Slider. Его оформление и функционал уступают не сильно, а вот кол-во кода на странице значительно уменьшается.

В данной теме рассмотрен один из вариантов стилизации такого ползунка.

Пример:

от 1 до 10 с шагом 1
от 4 до 32 с шагом 2
от 0 до 100 с шагом 5

HTML:

Для каждого <input type="range"/> задается:

min - минимальное значение ползунка;

max - максимальное значение ползунка;

step - шаг изменения ползунка;

value - начальное значение ползунка.

CSS:

JS:

Для каждого <input type="range"/> задается:

element - ID ползунка;

tick - шаг линейки.

За основу взято решение, найденное на codepen.io у пользователя Jon Kantner

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

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

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

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

  • Дархан:

    я на сайте использую одинаковых несколько ползунков.
    let range1 = new rSlider({
    element: "#range1",
    tick: 1
    }),
    для каждого нужно такой скрипт прописать, как можно одним скриптом обойтись, по классу не работает.

    Ответить
    • Alexander:

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

      Ответить
  • Сергей:

    Можно-ли сделать слайдер с переменным шагом, например, чтобы он перемещался по значениям 1,2,4,8?

    Ответить