Ползунок — это новый способ ввода информации, введенный в 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
• Создание эффектов загрузки страницы