Ползунки, которые в HTML-коде представлены тегом <input type="range">, обычно довольно скучны. Однако стилизация этих ползунков может быть разнообразной, очень красивой и даже похожей на подарок от Санта Клауса. Чаще всего ползунки нужны для определения некоторого бюджета, например приемлемого диапазона цен для покупки в Интернет-магазине, расчета стоимости окна или квартиры или расходов на детский праздник.
Ниже вы найдете ряд примеров как просто стилизации ползунка, так и вариантов отображения одного или двух значений. Все примеры можно посмотреть или отредактировать на codepen.io.
Стильные ползунки
Ползунок с градиентом
Изменение внешнего вида <input type="range"> за счет градиентов. Автор Jon Kantner
See the Pen Range Slider With Glowing Gradient by Jon Kantner (@jkantner) on CodePen.
Неоновый слайдер-ползунок
Автор Alvaro Montoro. Чем больше значение, тем ярче светится ползунок.
See the Pen Glow slider by Alvaro Montoro (@alvaromontoro) on CodePen.
Ползунок с анимацией взлета и посадки
Автор Alvaro Montoro
See the Pen Flight slider - HTML+CSS by Alvaro Montoro (@alvaromontoro) on CodePen.
"Конфетно-рождестверский" ползунок
Санта бы одобрил )) Автор Jon Kantner
See the Pen Peppermint Range Slider by Jon Kantner (@jkantner) on CodePen.
Изменение одного значения для ползунка
Ползунок, показывающий, как связаны его перемещение и значения.
See the Pen Range Input by Elen (@ambassador) on CodePen.
Ползунок со анимационной сменой значений
Этот похож на предыдущий, но его значения меняются с использованием анимации. Автор Jon Kantner
See the Pen Range With Sliding Value by Jon Kantner (@jkantner) on CodePen.
Слайдер с анимацией значения-подсказки в виде воздушного шарика
Автор Hirad Arshadi. Код использует Vue.js и TweenLite
See the Pen Balloon Slider by Hirad Arshadi (@hiradary) on CodePen.
И еще один подобный вариант стилизации в виде капли.
See the Pen Range Styling by Elen (@ambassador) on CodePen.
Слайдер для смены изображений
Слайдер, позволяющий посмотреть на черно-белое и цветное изображения на основе псевдоэлементов ::before и ::after и <input type="range">. Автор Chris Pennington
See the Pen Before/After Image Slider by Chris Pennington (@Coding-in-Public) on CodePen.
Связка значений <input type="range"> и <input type="number">
Вы можете изменять любое значение либо с помощью ползунка, либо с помощью числового поля. Автор Tippingpoint.
See the Pen Range Input with values (Pure HTML, CSS, JS) by Tippingpoint Dev (@tippingpointdev) on CodePen.
Ползунок для кофе
Автор Jhey
See the Pen CSS Only Balance Slider by Jhey (@jh3y) on CodePen.
Генератор паролей
В этом примере <input type="range"> позволяет нам выбрать количество символов для генерации надежного пароля.
See the Pen Random Password Generator in HTML CSS & JavaScript by Elen (@ambassador) on CodePen.
Отличный ползунок-переключатель цвета фона
Автор Jon Kantner.
See the Pen Neumorphic Light Switch by Jon Kantner (@jkantner)on CodePen.
Ползунок, отображающийся в виде капсулы. Основан на классе RangePill
Автор Jon Kantner. Очень креативный автор
See the Pen Range Pills by Jon Kantner (@jkantner) on CodePen.
Слайдер, определяющий бюджет
Автор Hornebom
See the Pen budgetSlider by Hornebom (@Hornebom) on CodePen.
Эластичный ползунок
Очень элегантное решение от lmgonzalves
See the Pen Elastic Range Input by lmgonzalves (@lmgonzalves) on CodePen.
Генератор паттерна в виде SVG
Отличный вариант для быстрого создания ымп-паттерна для фона, например. Автор George Francis
See the Pen Generative SVG Noise Pattern Maker by George Francis (@georgedoescode) on CodePen.
Выбирайте дом
Очень интересное решение, которое показывает дом в зависимости от количества комнат. Автор David Khourshid
See the Pen CSS Responsive House by David Khourshid (@davidkpiano) on CodePen.
Ползунок для управления CSS фильтрами
Выбирайте CSS фильтр кликом на кнопку, а затем управляйте его значением с помощью ползунка. Автор Alexandre Vacassin.
See the Pen CSS / SVG Filter Generator by Alexandre Vacassin (@alexandrevacassin) on CodePen.
Изменение двух значений ползунков
Ползунок для выбора диапазона цены.
Реагирует на ввод значений и на перетаскивание
See the Pen Price Range Slider in JavaScript by Elen (@ambassador) on CodePen.
Второй пример от Dima.
See the Pen price range slider by Dima (@dimaZubkov) on CodePen.
Ползунки на основе React.js
Очень креативный подход к оформлению <input type="range">. Посмотрите все варианты. Автор Dilum Sanjaya
See the Pen React Range Sliders by Dilum Sanjaya (@dilums) on CodePen.
Второй пример от OlgaKoplik.
See the Pen Double range slider React JS by Olga (@OlgaKoplik) on CodePen.
Ползунки на основе Bootstrap и bootstrap-slider.js
Во всех ползунках есть отображения значения над ним. Просто наведите на маркер или переместите ползунок.
See the Pen bootstrap-slider input range custom css js by vlad (@faur) on CodePen.
Замена ползунка с помощью SVG
При перемещении ползунка изменяется степень заливки сердечка. Можно использовать для рейтинга или отзывов. Автор Chris Gannon.
See the Pen Love Slider by Chris Gannon (@chrisgannon) on CodePen.
