Ползунки, которые в 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.0

Неоновый слайдер-ползунок

Автор Alvaro Montoro. Чем больше значение, тем ярче светится ползунок.

See the Pen Glow slider by Alvaro Montoro (@alvaromontoro) on CodePen.0

Ползунок с анимацией взлета и посадки

Автор Alvaro Montoro

See the Pen Flight slider - HTML+CSS by Alvaro Montoro (@alvaromontoro) on CodePen.0

"Конфетно-рождестверский" ползунок

Санта бы одобрил )) Автор Jon Kantner

See the Pen Peppermint Range Slider by Jon Kantner (@jkantner) on CodePen.0

Изменение одного значения для ползунка

Ползунок, показывающий, как связаны его перемещение и значения.

See the Pen Range Input by Elen (@ambassador) on CodePen.0

Ползунок со анимационной сменой значений

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

See the Pen Range With Sliding Value by Jon Kantner (@jkantner) on CodePen.0

Слайдер с анимацией значения-подсказки в виде воздушного шарика

Автор Hirad Arshadi. Код использует Vue.js и TweenLite

See the Pen Balloon Slider by Hirad Arshadi (@hiradary) on CodePen.0

И еще один подобный вариант стилизации в виде капли.

See the Pen Range Styling by Elen (@ambassador) on CodePen.0

Слайдер для смены изображений

Слайдер, позволяющий посмотреть на черно-белое и цветное изображения на основе псевдоэлементов ::before и ::after и <input type="range">. Автор Chris Pennington

See the Pen Before/After Image Slider by Chris Pennington (@Coding-in-Public) on CodePen.0

Связка значений <input type="range"> и <input type="number">

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

See the Pen Range Input with values (Pure HTML, CSS, JS) by Tippingpoint Dev (@tippingpointdev) on CodePen.0

Ползунок для кофе

Автор Jhey

See the Pen CSS Only Balance Slider by Jhey (@jh3y) on CodePen.0

Генератор паролей

В этом примере <input type="range"> позволяет нам выбрать количество символов для генерации надежного пароля.

See the Pen
Random Password Generator in HTML CSS & JavaScript
by Elen (@ambassador)
on CodePen.0

Отличный ползунок-переключатель цвета фона

Автор Jon Kantner.

See the Pen Neumorphic Light Switch by Jon Kantner (@jkantner)on CodePen.0

Ползунок, отображающийся в виде капсулы. Основан на классе RangePill

Автор Jon Kantner. Очень креативный автор

See the Pen Range Pills by Jon Kantner (@jkantner) on CodePen.0

Слайдер, определяющий бюджет

Автор Hornebom 

See the Pen budgetSlider by Hornebom (@Hornebom) on CodePen.0

Эластичный ползунок

Очень элегантное решение от lmgonzalves 

See the Pen Elastic Range Input by lmgonzalves (@lmgonzalves) on CodePen.0

Генератор паттерна в виде SVG

Отличный вариант для быстрого создания ымп-паттерна для фона, например. Автор George Francis

See the Pen Generative SVG Noise Pattern Maker by George Francis (@georgedoescode) on CodePen.0

Выбирайте дом

Очень интересное решение, которое показывает дом в зависимости от количества комнат. Автор David Khourshid

See the Pen CSS Responsive House by David Khourshid (@davidkpiano) on CodePen.0

Ползунок для управления CSS фильтрами

Выбирайте CSS фильтр кликом на кнопку, а затем управляйте его значением с помощью ползунка. Автор Alexandre Vacassin.

See the Pen
CSS / SVG Filter Generator
by Alexandre Vacassin (@alexandrevacassin)
on CodePen.0

Изменение двух значений ползунков

Ползунок для выбора диапазона цены.

Реагирует на ввод значений и на перетаскивание

See the Pen Price Range Slider in JavaScript by Elen (@ambassador) on CodePen.0

Второй пример от Dima.

See the Pen price range slider by Dima (@dimaZubkov) on CodePen.0

Ползунки на основе React.js

Очень креативный подход к оформлению <input type="range">. Посмотрите все варианты.  Автор Dilum Sanjaya

See the Pen React Range Sliders by Dilum Sanjaya (@dilums) on CodePen.0

Второй пример от OlgaKoplik.

See the Pen Double range slider React JS by Olga (@OlgaKoplik) on CodePen.0

Ползунки на основе Bootstrap и bootstrap-slider.js

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

See the Pen bootstrap-slider input range custom css js by vlad (@faur) on CodePen.0

Замена ползунка с помощью SVG

При перемещении ползунка изменяется степень заливки сердечка. Можно использовать для рейтинга или отзывов. Автор Chris Gannon.

See the Pen Love Slider by Chris Gannon (@chrisgannon) on CodePen.0

 

Автор: Админ

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

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