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

Поле ввода диапазона (range) – это один из новейших элементов ввода, представленный в HTML5. Этот тип ввода позволяет нам вводить число, находящееся в определенном диапазоне. Браузеры, однако, по умолчанию будут рендерить этот тип ввода в виде слайдера. Это очень удобный интерфейс, который можно часто видеть в приложениях. Мы можем перемещать ползунок вправо и влево, и выставлять таким образом определенное число.


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

В Chrome, Safari и Opera

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

Webkit предоставляет простой способ стилизовать любой тип ввода, включая и range. Для начала мы можем выбрать поле ввода при помощи селектора атрибутов и убрать нативные стили 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; 
}

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


Чтобы применить к нему стили, мы использовали Webkit соответствующий селектор псевдо-элементов ::-webkit-slider-thumband, чтобы исключить нативные стили в -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;
}

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

В Firefox

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

.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 отображает тип ввода range немного по-другому, нежели остальные. Чтобы облегчить все это, мы привели диаграмму, отображающую фрагменты, формирующие поле ввода.


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


Каждый элемент этого ввода можно оформить посредством соответствующего IE псевдо-элемента ::-ms-fill-lower, ::-ms-fill-upper, ::-ms-thumb, ::-ms-tick и ::-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” в элемент ввода. Однако вряд ли мы сможем сделать рукоятку полностью видимой. Так как параметр overflow у элемента ввода выставлен на hidden, и эту проблему нельзя решить просто выставив overflow на visible. Причину этого мы пытаемся выяснить до сих пор. Если вам удастся решить этот вопрос, пожалуйста, поделитесь с нами в комментариях.


В завершение

Элемент ввода range позволяет изменять и внешний вид. К сожалению, каждый браузер по-своему интерпретирует вводимые вами стили, и поэтому вам скорее всего придется использовать больший объем кода. Мы надеемся, что вскоре появится какой-то строгий стандарт для всех. Наконец, предлагаем вам ссылку, по которой вы сможете увидеть этот пример в действии.

Демо | Скачать исходный код