Понедельник, 08 Октября 2012 14:00

Тег input type="range". Описание и атрибуты

Written by 
Оцени эту запись
(4 Голоса)

В HTML есть новый вариант из семейства input'ов - <input type="range">. Этот тег служит для указания некоторого значение из заданного диапазона чисел. Проще говоря, это обычный ползунок.

 

Я уже останавливалась на этот элемента в предыдущих статьях, где рассказывала о его стилизации для WebKit'а и создании его аналога на JavavScript.

В этой статье я хочу подробнее рассказать о самом теге:

 

<input type="range">

 

 

 

Так он выглядит дефолтным. Но мы можем задать ему необходимые атрибуты:

 

min - минимальное возможное значение

max - максимальное возможное значение

value - значение по умолчанию

step - шаг

 

 

<input type="range" min="0" max="100">

<input type="range" min="0" max="1000">

 

 

 

На вид эти элементы не отличаются, но отличен их функционал.

 

 

<input type="range" min="0" max="100" value="50" step="10">

<input type="range" min="0" max="1000" value="50" step="10">

 

 

 

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

 

<input type="range" min="0" max="100" value="50" step="5" tabindex="1">

<input type="range" min="0" max="100" value="50" step="10" tabindex="2">

 

 

 

А в этом примере можно посмотреть, на что влияет атрибут step. Каждому из range мы добавили атрибут tabindex, который позволяет перейти на элемент при помощи клавиши Tab и управлять ним при помощи стрелочек вправо/влево клавиатуры. Выберите Tab'ом каждый из элементов и посмотрите разницу перемещения. Ползунок будет перемещаться влево/вправо на значение атрибута step.

 

О других новых типах элемента input читайте в статье Новые типы input в HTML5

 

 

You have no rights to post comments

верстка | CSS | верстка сайтов | HTML | верстальщик | блочная верстка | JavaScript | css верстка | профессиональная верстка сайтов