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

  • Элемент будет состоять из 4 частей: собственно сам двойной ползунок, линейка с отметками со значениями, поля для ручного ввода значений, и кликабельная гистограмма (как на Алиэкспресс).
  • Ползунок должен быть адаптивным.
  • Минимум javascript.
  • Отказываемся от использования картинок (не очень удобно редактировать внешний вид). Кому интересно, вот еще один качественный слайдер для диапазона цен с использованием изображений.

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

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