Input type range стилизация: Стилизуем слайдер input range для всех популярных браузеров / Хабр

Стилизация полосы прокрутки HTML5 для разных браузеров

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

 

 

---

Но как Вы можете видеть выше, каждый браузер отображает этот способ ввода информации немного по-своему, что не понравится дизайнерам. Так что в этом уроке мы покажем, как привести полосы прокрутки к одинаковому виду. Давайте начнем.

Рекомендованное чтение: Создание и стилизация индикатора прогресса с использованием HTML5

В браузерах Chrome, Safari и Opera 

Safari и Opera — браузеры Webkit. Хотя Chrome решил использовать свой собственный движок Blink, пока что он все еще наследуют некоторые формы записи от Webkit.

Webkit предоставляет удобный способ стилизации любых форм ввода, включая ползунок. Для начала мы можем выбрать тег input с атрибутом selector и отменить стандартные стили Webkit/Chrome, задав свойству -webkit-appearance значение none.

 

input[type=range] {
    -webkit-appearance: none
}

 

После этого мы можем добавить любые свойства, такие как граница, цвет фона, закругление границы и так далее.

input[type=range] {
    -webkit-appearance: none;
    width: 100%;
    border-radius: 8px;
    height: 7px;
    border: 1px solid #bdc3c7;
    background-color: #fff;
} 

 

Как Вы можете видеть ниже, код выше не затронул только ручку ползунка из всего тега input.

Чтобы применить к ней стили, нам нужно использовать собственный псевдоэлемент Webkit  ::-webkit-slider-thumb и таким же способом отменить стандартные стили с помощью -webkit-appearance, следующим образом:

input[type='range']::-webkit-slider-thumb {
-webkit-appearance: none;
background-color: #ecf0f1;
border: 1px solid #bdc3c7;
width: 20px;
height: 20px;
border-radius: 10px;
cursor: pointer;
}

 

Так мы зададим стили для ползунка для браузера Webkit. Стили, которые мы задали выше, должны примениться в браузерах Chrome, Safari и в последних версиях браузера Opera. Тем не менее, они не повлияют на браузеры Firefox и Internet Explorer, так как они работают на других движках. Но у нас есть обходные пути для этих двух браузеров.

В браузере Firefox 

Добавление стилей напрямую с  атрибутом selector input [type=’range’]не изменит стандартные стили в браузере Firefox. Вместо этого нам нужно использовать собственные псевдоэлементы браузера Firefox ::-moz-range-track и ::-moz-range-thumb.

Псевдоэлемент ::-moz-range-track повлияет на полосу ползунка, по которой движется ручка, а ::-moz-range-track повлияет на ручку ползунка.

.firefox input[type=range]::-moz-range-track {
    border-radius: 8px;
    height: 7px;
    border: 1px solid #bdc3c7;
    background-color: #fff;
}
.firefox input[type=range]::-moz-range-thumb {
    background: #ecf0f1;
    border: 1px solid #bdc3c7;
    width: 20px;
    height: 20px;
    border-radius: 10px;
    cursor: pointer;
}

 

Мы применили те же стили. Откройте браузер Firefox, и Вы увидите практически такой же результат, как и в браузерах Webkit.

В браузере Internet Explorer 

Браузер Internet Explorer отображает полосу прокрутки совсем не так, как остальные браузеры. Чтобы было проще, мы нарисовали изображение, показывающее части, составляющие ползунок.

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

Всем этим частям ползунка можно задать стили с помощью собственных псевдоэлементов браузера Internet Explorer ::-ms-fill-lower, ::-ms-fill-upper, ::-ms-thumb, ::-ms-ticks и ::-ms-tooltip. Здесь мы применим те же стили, что и для браузеров Webkit и Firefox.

input[type="range"]::-ms-fill-lower,
input[type="range"]::-ms-fill-upper {
    background: transparent;
}
input[type="range"]::-ms-track {
    border-radius: 8px;
    height: 7px;
    border: 1px solid #bdc3c7;
    background-color: #fff;
}
input[type="range"]::-ms-thumb {
    background-color: #ecf0f1;
    border: 1px solid #bdc3c7;
    width: 20px;
    height: 20px;
    border-radius: 10px;
    cursor: pointer;
}

 

Но в результате получилось не то, что мы ожидали.

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

Мы можем легко избавиться от делений, добавив step=»any» тегу input. Тем не менее, мы не можем сделать ручку ползунка полностью видимой. Это как если бы тегу input задали значения свойства overflow как hidden, но это нельзя отменить, просто задав  значения свойства overflow как visible. Это то, с чем мы еще разбираемся.

Заключение 

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

Демонстрация работы – Скачать исходный код

Автор урока Thoriq Firdaus

Перевод — Дежурка

Смотрите также:

• Создаем круговые и эллиптические градиенты с использованием CSS3
• Интересная скользящая форма с использованием jQuery
• Создание эффектов загрузки страницы

HTML CSS JS | Only to top

JavaScript: Работа с Массивами

JavaScript: Работа с Массивами 30/12/2020

В JavaScript работа с массивами происходит постоянно. Рассмотрим, наиболее полезные и часто используемые методы для работы с массивами

Наличие Динамически Добавленного Элемента

Наличие Динамически Добавленного Элемента 09/05/2020

Проверка на наличие динамически добавленного элемента в DOM-дерево с помощью JavaScript и jQuery

Стилизация Input File

Стилизация Input File 19/04/2020

Рассмотрим, как стилизовать input type file, как обработать выбранный файл и отправить на сервер. Предусмотрим возможность не только загрузить файл при клике на кнопку, но так же и перетаскивание файла drag and drop

Предзагрузка Картинок — Предварительная Загрузка Изображений на JavaScript

Предзагрузка Картинок — Предварительная Загрузка Изображений на JavaScript 07/03/2020

Предзагрузка изображений с помощью нативного JavaScript, jQuery, а так же при помощи rel=’preload’. Это может потребоваться, когда картинки добавляются в DOM динамически

Стилизация Скролла

Стилизация Скролла 31/01/2020

Рассмотрим, как стилизовать скролл с помощью CSS для Webkit и Mozilla, а так же используя плагин mCustomScrollbar.

События Формы

События Формы 05/01/2020

События формы: отправка, очистка полей, фокус элемента формы, потеря фокуса, события для input, select, checkbox, range и многое другое

Checkbox Checked — Проверка Состояния Чекбокса ✔️

Checkbox Checked — Проверка Состояния Чекбокса ✔️ 22/12/2019

Рассмотрим различные способы проверки состояния checkbox (checked, uncheched) c помощью jQuery, а также при помощи нативного JavaScript

JavaScript: Window Location

JavaScript: Window Location 30/11/2019

JavaScript: объект Window.Location предоставит вам информацию о текущем URL, позволит обновить (перезагрузить) текущую страницу, перенаправить на другую и многое другое.

Как Преобразовать Объект в Массив (JS)

Как Преобразовать Объект в Массив (JS) 23/11/2019

4 способа преобразовать объект в массив с помощью JavaScript. Использованы такие методы как: Object.keys, Object.values, Object.entries, а также деструктуризация

Как Определить Мобильное Устройство с Помощью JavaScript

Как Определить Мобильное Устройство с Помощью JavaScript 16/11/2019

Определим мобильное устройство сначала при помощи JavaScript, а затем воспользуемся маленькой библиотекой mobile-detect. js

Кнопки «поделиться» для сайта

Кнопки «поделиться» для сайта 01/11/2019

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

Как стилизовать слайдер диапазона HTML5 в нескольких браузерах

Диапазон — это один из новых типов ввода, представленных в HTML5. Этот тип ввода позволяет вводить число в указанном диапазоне. Браузеры изначально будут отображать этот тип ввода как ползунок . Это очень интуитивно понятный пользовательский интерфейс, который мы обычно находим в приложении. Мы можем сдвинуть рукоятку вправо или влево, чтобы получить число в пределах диапазона.

Но, как вы можете видеть выше, каждый браузер отображает этот тип ввода в немного другой вкус , который может не понравиться некоторым дизайнерам. Итак, в этой статье мы покажем вам , как стилизовать его в более единой форме дизайна . Если вы готовы, давайте просто начнем.

Рекомендуемая литература: Создание и стилизация индикатора выполнения с помощью HTML5

В Chrome, Safari и Opera

Safari и Opera — браузеры на основе Webkit. Хотя Chrome решил использовать свой собственный движок Blink, похоже, что на данный момент Chrome все еще унаследовал несколько кодовых баз от веб-сайтов.

Webkit предоставляет простой способ стилизовать любой тип ввода, включая

диапазон . Для начала мы можем выбрать ввод с помощью селектора атрибутов и удалить собственные стили Webkit/Chrome, установив для -webkit-appearance значение none .

ввод [тип = диапазон] {
-webkit-внешний вид: нет
}
 

На этом этапе мы можем добавить что угодно, например рамку, цвет фона, круглую рамку и так далее.

.input[тип=диапазон] {
-webkit-внешний вид: нет;
ширина: 100%;
радиус границы: 8px;
высота: 7 пикселей;
граница: 1px сплошная #bdc3c7;
цвет фона: #fff;
}
 

Как вы можете видеть ниже, руль — единственная оставшаяся часть ввода, на которую не влияет приведенный выше код.

Чтобы применить к нему стили, мы должны использовать проприетарный селектор псевдоэлементов Webkit ::-webkit-slider-thumb и аналогичным образом удалить нативные стили с помощью -webkit-appearance, вот так.

input[type='range'] ::-webkit-slider-thumb {
-webkit-внешний вид: нет;
цвет фона: #ecf0f1;
граница: 1px сплошная #bdc3c7;
ширина: 20 пикселей;
высота: 20 пикселей;
радиус границы: 10px;
курсор: указатель;
}
 

Именно так мы оформляем диапазон типов ввода в браузере Webkit. Стиль, который мы добавили выше, должен работать в Chrome, Safari, а также в последней версии Opera. Однако это не повлияет на Firefox и Internet Explorer, поскольку они используют разные движки. Но у нас есть обходные пути для этих двух.

В Firefox

Добавление стилей непосредственно с помощью селектора атрибутов input[type='range'] не изменит собственные стили ввода в Firefox. Вместо этого мы должны использовать проприетарный селектор псевдоэлементов Firefox 9. 0023 ::-moz-range-track и ::-moz-range-thumb .

::-moz-range-track

повлияет на дорожку диапазона ввода, а ::-moz-range-thumb повлияет на манипулятор ввода.

.firefox input[тип=диапазон]::-moz-range-track {
радиус границы: 8px;
высота: 7 пикселей;
граница: 1px сплошная #bdc3c7;
цвет фона: #fff;
}
.firefox input[тип=диапазон]::-moz-range-thumb {
фон: #ecf0f1;
граница: 1px сплошная #bdc3c7;
ширина: 20 пикселей;
высота: 20 пикселей;
радиус границы: 10px;
курсор: указатель;
}
 

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

В Internet Explorer

В Internet Explorer диапазон типов ввода сильно отличается от остальных. Чтобы было проще, здесь я нарисовал схему, показывающую части, которые формируют вход.

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

Каждая из этих частей ввода может быть оформлена с помощью собственного псевдоэлемента 9 IE.0023 ::-ms-fill-lower , ::-ms-fill-upper , ::-ms-thumb , ::-ms-ticks и ::-ms-tooltip . Здесь мы также применим те же стили, что и в Webkit и Firefox.

input[type="range"]::-ms-fill-lower,
input[type="range"]::-ms-fill-upper {
фон: прозрачный;
}
input[type="range"]::-ms-track {
    радиус границы: 8px;
высота: 7 пикселей;
граница: 1px сплошная #bdc3c7;
цвет фона: #fff;
}
input[type="range"]::-ms-thumb {
цвет фона: #ecf0f1;
граница: 1px сплошная #bdc3c7;
ширина: 20 пикселей;
высота: 20 пикселей;
радиус границы: 10px;
курсор: указатель;
}
 

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

Мы можем легко удалить деления , добавив step="any" к элементу ввода. Однако сделать руль полностью видимым невозможно. Это , как будто элемент ввода имеет переполнение

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

Заключение

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

• Посмотреть демонстрацию
• Источник загрузки

21 слайдер диапазона CSS

Коллекция отобранных бесплатных HTML и слайдер диапазона CSS примеров кода. Обновление майской коллекции 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

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

О коде

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

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