ПОЛЗУНОК СО СКРИПТОМ ДЛЯ ВЫВОДА Мы уже познакомились с
type=range>
ранее в этой главе. Обратите внимание,
что по умолчанию браузеры отображают ползунок, но не выводят для него минимальное,
максимальное и текущее значение. Давайте напишем код для следующего случая: пусть нам
нужно показать пользователю диапазон допустимых значений в виде ползунка, причем мы
хотим добиться автоматического вывода значений верхней и нижней границы и динами-
ческого вывода текущего значения ползунка.
Ползунок будет перемещаться от 1 до 11, как и все нормальные элементы управления (будь
то гитарный усилитель или что-либо другое), с шагом 1, и поскольку это значение исполь-
зуется по умолчанию, мы можем вообще не добавлять атрибут
step
.
Чтобы отобразить значения верхней и нижней границы, будем использовать генерируемый
контент (который не работает для ползунков в браузерах WebKit).
input[type=range]::before {content: attr(min);}
input[type=range]::after {content: attr(max);}
Этот код отобразит нужные значения и создаст для них оформление с помощью CSS. В ка-
честве примера (рис. 3.12) приведем результат работы следующего кода.
input[type=range]{width:500px; color:red; font-family:
¬ cursive; font-size:2em;}
Рис . 3 .12 . Визуализация
и генерируемые значения min и max в Opera
Чтобы отобразить текущее значение ползунка, мы будем использовать новый элемент
