Slider css: Слайдер для сайта на чистом CSS и JavaScript

21 CSS Range Sliders

Коллекция отобранных бесплатных примеров кода HTML и CSS Range Slider . Обновление майской коллекции 2019 года. 5 новых предметов.

1. Ползунки диапазона JavaScript
2. Ползунки диапазона jQuery

О коде

Многодиапазонный ввод, только CSS

Ползунок ввода диапазона с отметками CSS с использованием оболочки с пользовательскими свойствами CSS (переменными CSS) с минимальным и максимальным значениями, напечатанными по краям. Текст минимального значения выравнивается по левому краю, а максимальное значение совпадает по правому краю. Текущее значение (выходной элемент) всегда сохраняется в горизонтальном диапазоне компонента, поэтому оно не будет переполняться. Демонстрация предполагает, что какой-то шаблон JS будет автоматически генерировать разметку, поэтому заполнение всех многочисленных переменных CSS/атрибутов HTML не требует ручной работы.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Ползунок диапазона CSS

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: нет

Зависимости: —

О коде

Неоморфизм — ползунок диапазона

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Стильный слайдер диапазона

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Ползунок диапазона

Простой ползунок диапазона в HTML и CSS.

Совместимые браузеры: Chrome, Firefox, Opera, Safari

Ответ: нет

Зависимости: —

О коде

Ползунок пользовательского диапазона CSS

Ползунок диапазона только для CSS. JS используется для изменения цвета и метки %.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: нет

Зависимости: jquery.js

О коде

Радиокнопка Dot-Slider

Ползунок диапазона кликов на чистом CSS со скользящим точечным индикатором, метками, стилем с условием достоверности и БЕЗ JS. Работает на 100% на сайтах с ограничениями JS.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Ползунок Диапазон

Ползунок диапазона для веса в HTML, CSS и JavaScript.

Совместимые браузеры: Chrome, Firefox, Opera, Safari

Зависимости: —

О коде

Кросс-браузерный ввод диапазона со сплошной нижней заливкой

Использует box-shadow на псевдоэлементе большого пальца для создания заливки в пределах входного диапазона.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

О коде

Ползунок минимального диапазона

Только минимальный диапазон ввода CSS3.

Совместимые браузеры: Chrome, Firefox, Opera, Safari

Зависимости: —

О коде

тип ввода=диапазон #99

Настраиваемый ползунок диапазона с HTML, CSS и JS.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

О коде

тип ввода=диапазон #98

Ползунок диапазона № 98 в HTML, CSS, JS Аны Тюдор.

Совместимые браузеры: Edge, Firefox

Зависимости: —

О коде

тип ввода=диапазон #96

Ползунок диапазона № 96 в HTML, CSS, JS Аны Тюдор.

Совместимые браузеры: Edge, Firefox

Зависимости: —

О коде

тип ввода=диапазон #94

Ползунок диапазона # 94 в HTML и CSS Аны Тюдор.

Совместимые браузеры: Chrome, Firefox, Opera, Safari

Зависимости: —

О коде

тип ввода=диапазон #91

Отличное исполнение и хороший выбор для практики.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

О коде

тип ввода=диапазон #87

Кроссбраузерный ползунок диапазона 1 элемента.

Совместимые браузеры: Edge, Firefox

Зависимости: —

О коде

ввод [тип = ‘диапазон’]

Стилизация элемента InputRange без extraDom или JS.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

О коде

тип ввода=диапазон #40

Ползунок диапазона № 40 в HTML, CSS и JS Аны Тюдор.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

О коде

Ползунок диапазона

Индивидуальный ползунок диапазона.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

О коде

Ввод диапазона: изменение текущего значения

В режиме реального времени измените значение диапазона input , используя «input» JavaScript addEventListener .

Совместимые браузеры: Chrome, Firefox, Opera, Safari

Зависимости: —

О коде

Ползунок диапазона цен

Ползунок ценового диапазона 3D HTML5.

Совместимые браузеры: Chrome, Firefox, Opera, Safari

Зависимости: jquery.js

66 ярких примеров дизайна слайдера диапазона CSS (БЕСПЛАТНЫЕ демонстрации)

Ползунок шестерни

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

Сделано с:

HTML

CSS

JavaScript

Зависимости:

SCSS

JQuery

Посмотреть код и демонстрацию

Ползунок диапазона CSS

Фрагмент кода из 3-х ползунков одного диапазона с индикатором значения и разным значением шага.

Сделано с:

HTML

CSS

JavaScript

Зависимости:

SCSS

JQuery

Посмотреть код и демо

Ползунок двойного диапазона

Этот фрагмент кода представляет собой минималистичный ползунок двойного диапазона с желтой темой и индикаторами значений.

Сделано из:

HTML

CSS

JavaScript

Зависимости:

JQuery

Посмотреть код и демонстрацию

Ползунок диапазона Verly

Очень творческий, но не очень полезный ввод диапазона, имитирующий висячую полосу.

Сделано с:

HTML

CSS

JavaScript

Зависимости:

Verly Range Slider

Посмотреть код и демонстрацию

Выходные данные ползунка диапазона

CodePen с простым ползунком диапазона, который имеет пузырек, указывающий значение в верхней части маркера.

Сделано с:

HTML

CSS

JavaScript

Зависимости:

SCSS

JQuery

Посмотреть код и демо

Ползунок бюджета

Пример кода красивого трехмерного ползунка диапазона, показывающего ваш бюджет.

Сделано с:

HTML

CSS

JavaScript

Зависимости:

JQuery

Посмотреть код и демонстрацию

Ползунковый эквалайзер диапазона

Этот фрагмент кода представляет собой набор входных данных диапазона, которые имитируют эквалайзер с привлекательным дизайном.

Сделано с:

HTML

CSS

Зависимости:

Посмотреть код и демонстрацию

Ползунок диапазона куба

Ползунок творческого диапазона, который указывает значение, подсвечивая набор светло-зеленых 3D-кубов.

Сделано с:

HTML

CSS

JavaScript

Зависимости:

Посмотреть код и демонстрацию

Нейморфный дизайн слайдера с одним диапазоном на чистом CSS

Впечатляющий дизайн слайдера с одним диапазоном в неоморфном стиле и без использования JavaScript.

Сделано с:

HTML

CSS

Зависимости:

Посмотреть код и демонстрацию

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

Этот фрагмент кода представляет собой трехмерный телефон, который вращается с помощью простого ползунка диапазона.

Сделано с помощью:

HTML

CSS

JavaScript

Зависимости:

SCSS

JQuery

GSAP

Посмотреть код и демонстрацию

Ползунок диапазона GSAP SVG

Красивый изогнутый ползунок диапазона с изменением цвета в зависимости от положения ручки.

Сделано с:

HTML

CSS

JavaScript

Зависимости:

JQuery

GSAP

Посмотреть код и демонстрацию

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

Простой собственный и настраиваемый ползунок диапазона с розовым дизайном, использующий только ввод HTML и чистый CSS.

Сделано с:

HTML

CSS

Зависимости:

Посмотреть код и демонстрацию

Динамический фон сетки с помощью ползунка диапазона

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

Сделано из:

HTML

CSS

JavaScript

Зависимости:

Посмотреть код и демонстрацию

Индикатор ползунка CSS

Этот CodePen отображает ползунок ввода с индикатором округленного значения, который отображается каждый раз при изменении значения ползунка диапазона.

Сделано с:

HTML

CSS

JavaScript

Зависимости:

Посмотреть код и демо

Слайдер для шара SVG

Этот фрагмент кода имеет один входной диапазон с прекрасной анимацией для пузырькового индикатора, который отображается каждый раз при изменении значения.

Сделано с:

HTML

CSS

JavaScript

Зависимости:

Посмотреть код и демо

Плоские ползунки диапазона

Фрагмент кода 3 ползунков диапазона с плоским дизайном и красной темой с использованием только CSS.

Сделано с:

HTML

CSS

Зависимости:

Посмотреть код и демонстрацию

Входы с несколькими диапазонами

В этом фрагменте кода мы находим набор из 4 высококачественных настраиваемых ползунков диапазонов с различным дизайном.

Сделано с:

HTML

CSS

JavaScript

Зависимости:

Посмотреть код и демо

Многодиапазонный ползунок пользовательского интерфейса jQuery

CodePen с многодиапазонным ползунком ввода с индикаторами в обоих обработчиках, созданных с помощью jQuery.

Сделано из:

HTML

CSS

JavaScript

Зависимости:

JQuery

Посмотреть код и демонстрацию

Ползунок диапазона цветов градиента

Этот фрагмент кода отображает один ползунок диапазона, он отображает градиент для указания активного значения ввода.

Сделано с:

HTML

CSS

JavaScript

Зависимости:

SCSS

JQuery

CoffeeScript

Посмотреть код и демонстрацию0005

Ползунок диапазона в форме ручки

Этот CodePen представляет собой ползунок диапазона в виде ручки с одним элементом ввода HTML и почти без JavaScript.

Сделано с:

HTML

CSS

JavaScript

Зависимости:

Посмотреть код и демо

Чистый диапазон ввода CSS

Минималистичный ползунок диапазона чистого CSS с красной темой и индикатором, показывающим текущее значение.

Сделано с помощью:

HTML

CSS

Зависимости:

Посмотреть код и демонстрацию

Ползунок диапазона с индикатором значения

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

Сделано с:

HTML

CSS

JavaScript

Зависимости:

Посмотреть код и демо

Ползунок ценового диапазона

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

Сделано с:

HTML

CSS

JavaScript

Зависимости:

Pug

Stylus

JQuery

0 View Code0 and 5 Demo 0 and 5 Demo

Ползунок диапазона времени JQuery

Этот CodePen создан с использованием библиотеки jQuery и отображает ползунок двойного диапазона для установки диапазона времени.

Сделано с:

HTML

CSS

JavaScript

Зависимости:

JQuery

Посмотреть код и демонстрацию

Ползунок пользовательского диапазона CSS

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

Сделано с:

HTML

CSS

JavaScript

Зависимости:

SCSS

JQuery

Посмотреть код и демо

Ползунок двухточечного диапазона

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

Сделано с:

HTML

CSS

JavaScript

Зависимости:

JQuery

Bootstrap

Посмотреть код и демо

Ввод диапазона Neumorphism

Если вам нужен пример дизайна слайдера с одним диапазоном в стиле Neumorphism с использованием только CSS и HTML, это ваш выбор.

Сделано с:

HTML

CSS

Зависимости:

Посмотреть код и демонстрацию

Индикатор веса диапазона ползунка

Этот фрагмент кода представляет собой ввод ползунка диапазона с простой конструкцией для установки веса и с индикатором округленного значения в обработчике.

Сделано с:

HTML

CSS

JavaScript

Зависимости:

Посмотреть код и демо

Ползунок с несколькими диапазонами CSS3

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

Сделано с:

HTML

CSS

Зависимости:

Посмотреть код и демонстрацию

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

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

Зависимости:

SCSS

JQuery

Посмотреть код и демонстрацию

Ползунок вертикального диапазона

Фрагмент кода простого, но хорошо продуманного вертикального ползунка с привлекательной оранжевой темой.

Сделано с:

HTML

CSS

JavaScript

Зависимости:

SCSS

JQuery

Посмотреть код и демо

Компактный ползунок диапазона

Этот фрагмент кода представляет собой простой, но красивый встроенный ползунок ввода с тонким эффектом наведения.

Сделано с помощью:

HTML

CSS

Зависимости:

Посмотреть код и демонстрацию

Ползунок скользящего диапазона

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

Сделано с:

HTML

CSS

JavaScript

Зависимости:

Stylus

Посмотреть код и демонстрацию

Скругленный ползунок диапазона

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

Сделано с:

HTML

CSS

JavaScript

Зависимости:

SCSS

JQuery

Посмотреть код и демо

Стильный ползунок диапазона

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

Сделано с:

HTML

CSS

Зависимости:

Посмотреть код и демонстрацию

Ползунок диапазона пользовательского интерфейса

Этот простой ползунок ввода диапазона создан только с использованием HTML и CSS и имеет индикатор значения.

Сделано с:

HTML

CSS

Зависимости:

Посмотреть код и демонстрацию

Ползунок радиального диапазона

Ползунок радиального диапазона 360 градусов с розовой темой и индикатором точного значения градуса в центре компонента пользовательского интерфейса.

Сделано с:

HTML

CSS

JavaScript

Зависимости:

SCSS

Haml

CoffeeScript

Code

JQuery и JQuery0005

Ползунок диапазона SVG

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

Сделано с:

HTML

CSS

JavaScript

Зависимости:

SCSS

GSAP

Посмотреть код и демонстрацию

Ползунок диапазона Material Design

Ползунок диапазона с индикатором значения на контроллере с зеленой темой, вдохновленной стилем Material Design.

Сделано из:

HTML

CSS

JavaScript

Зависимости:

PUG

Stylus

PUG

COFFEESCRPT

JQUERY

VIESS и DEMO

Элементы управления ползунками Chrome

Фрагмент кода с набором из 5 ползунков с одинаковым дизайном, но разными цветами и элегантным дизайном.

Сделано с:

HTML

CSS

JavaScript

Зависимости:

SCSS

JQuery

Посмотреть код и демонстрацию

Границы ползунка диапазона с плавающей запятой

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

Сделано с:

HTML

CSS

JavaScript

Зависимости:

SCSS

JQuery

rangeslider.js

0 Код 0 и Demo 90

Ползунок с двойным диапазоном React JS

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

Сделано с:

HTML

CSS

JavaScript

Зависимости:

SCSS

React JS

Посмотреть код и демо

Ввод диапазона

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

Сделано из:

HTML

CSS

JavaScript

Зависимости:

Посмотреть код и демонстрацию

Адаптивный слайдер

Коллекция из 4 слайдеров диапазона, один двойной и одинарный, с разными цветовыми темами и красивой анимацией при перемещении ручки.

Сделано с:

HTML

CSS

JavaScript

Зависимости:

SCSS

JQuery

Посмотреть код и демо

Ползунок диапазона одноколесного велосипеда

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

Сделано с:

HTML

CSS

JavaScript

Зависимости:

Посмотреть код и демо

3D-ползунок диапазона цен

В этом фрагменте кода показан один 3D-ползунок диапазона для настройки вашего бюджета.

Сделано с:

HTML

CSS

JavaScript

Зависимости:

JQuery

Посмотреть код и демонстрацию

Ползунок диапазона HTML

CodePen с одним входным ползунком диапазона и с индикатором значения на дескрипторе.

Сделано с:

HTML

CSS

JavaScript

Зависимости:

Меньше

JQuery

Посмотреть код и демонстрацию

Ползунок диапазона громкости

Этот фрагмент кода показывает индикатор диапазона громкости приятного желтого цвета и дизайн в стиле неоморфизма.

Сделано с:

HTML

CSS

JavaScript

Зависимости:

SCSS

Мопс

Посмотреть код и демо

Ползунок диапазона куба

Этот фрагмент творческого кода показывает один ползунок диапазона в форме трехмерных кристальных кубов.

Сделано с:

HTML

CSS

JavaScript

Зависимости:

Посмотреть код и демо

Диапазон кредита

Ввод диапазона для отображения суммы кредита с фиолетовым градиентом, отображающим активную зону, и красивой активной анимацией на ручке.

Сделано с:

HTML

CSS

JavaScript

Зависимости:

Посмотреть код и демо

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

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

Сделано из:

HTML

CSS

JavaScript

Зависимости:

SCSS

JQuery

Посмотреть код и демонстрацию

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

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

Сделано с:

HTML

CSS

JavaScript

Зависимости:

SCSS

JQuery

Посмотреть код и демо

Ползунок с двумя диапазонами

Этот CodePen демонстрирует минималистичный ползунок с двумя диапазонами и лаконичным дизайном.

Сделано с:

HTML

CSS

JavaScript

Зависимости:

Посмотреть код и демо

Ползунок диапазона на чистом CSS

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

Сделано с:

HTML

CSS

Зависимости:

Посмотреть код и демонстрацию

Ползунок пользовательского диапазона

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

Сделано с:

HTML

CSS

JavaScript

Зависимости:

Посмотреть код и демо

Ползунок диапазона с несколькими ручками

Ползунок с несколькими диапазонами с приятной анимацией на ручке при наведении или нажатии на нее и очень стильной фиолетовой темой.

Сделано из:

HTML

CSS

JavaScript

Зависимости:

Посмотреть код и демонстрацию

Многодиапазонный ползунок времени

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

Сделано с:

HTML

CSS

JavaScript

Зависимости:

Stylus

Посмотреть код и демонстрацию

Ползунок двойного диапазона

Фрагмент кода ползунка двойного диапазона для выбора квадратных метров, с красивым и простым дизайном.

Сделано с:

HTML

CSS

JavaScript

Зависимости:

JQuery

Посмотреть код и демонстрацию

Ползунок диапазона React

Ползунок диапазона, созданный с помощью React.js, с индикатором значения на краю.

Сделано с:

HTML

CSS

JavaScript

Зависимости:

Посмотреть код и демо

Ползунок двойного диапазона AngularJS

Этот CodePen показывает ползунок двойного диапазона с настраиваемыми значениями, созданными с помощью AngularJS.

Сделано с:

HTML

CSS

JavaScript

Зависимости:

AngularJS

JQuery

Посмотреть код и демо

Ползунок с несколькими диапазонами с Alpine.js и Tailwind CSS

Ползунок с двумя диапазонами с индикаторами значений на каждом краю компонента, созданный с помощью Tailwind.css и Alpine.js.

Сделано с:

HTML

CSS

JavaScript

Зависимости:

Alpine.js

Tailwind CSS

Посмотреть код и демонстрацию

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

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

Сделано с:

HTML

CSS

JavaScript

Зависимости:

Pug

SCSS

JQuery

0 Посмотреть код и 5 Demo 0 и 5 Demo 0 и 5 Demo 0 и 5

Сдвиг темы с ползунком диапазона

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