Ползунок диапазона или Range slider - это очень интуитивно понятный пользовательский интерфейс с одним или двумя переключателями, позволяющий пользователю выбирать значение в ограниченном диапазоне.

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

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

Итак, вот 25 примеров ползунков диапазона CSS, которые помогут пользователю интерактивно и легко изменить значения в выбранном диапазоне.

Ползунки цены

sgeek - Cloud Pricing Slider

Современные, практичные, отзывчивые слайдеры

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

CSS ползунок в стиле Chrome

Ползунок громкости(UI Volume)

Gear Slider

Вертикальный ползунок громкости

Gooey Slider

SVG ползунок

Чистые CSS ползунки в стиле flat

Двойной ползунок

Яркий ползунок SVG

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

Google Material ползунок

Градиентный слайдер ползунок с диапазоном

Ползунок диапазона с обратной связью

Ползунок с выводом значения

Ползунок с выводом значений в блоке

CSS слайдер ползунок

Ползунок диапазона, два ползунка, всплывающее окно + ввод данных

SVG Fill from noUI Range Slider Values

JQuery UI Slider

Музыкальный ползунок Ionic Framework + AngularJS

Круговая шкала(ползунок) + мобильная поддержка

Flat Range Sliders - Flat ползунки