polzunok-ili-input-type-range-v-html5-150x150Сегодня узнал о нововведении в html5, а именно теперь можно в наш код прописать ползунок(или как его еще называют скроллер) который будет выдавать нам значения в виде цифр. В статье постараюсь описать все, что можно сотворить с этой “деталькой” нашего сайта .

Прописываем и настраиваем ползунок в HTML 5

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

В код добавляется следующая конструкция:

< input type=«range» max=«10» min=«1» value=«5» step=«1»>

Разберем все значения по порядку:

  • type=”range” – указываем тип формы, в нашем случае ползунок
  • min=”1″ – это минимальное число, которое может принять форма. Стандарт 0.
  • max=”10″ – максимальное число, которое принимает форма. По умолчанию 100.
  • step=”1″ – шага изменения чисел, стандарт 1
  • value=”5″ – первоначальное положение ползунка.

Вычисляется последние по следующей формуле:

range-formulaПри условии, что max меньше min, value будет равняться min. Все атрибуты не являются обязательными, следовательно их можно опустить, при этом они будут равняться стандартным значениям.

К сожалению на данный момент ползунок не передерживаться браузерами IE и Firefox, в них отображаться простое поле с значением  value. В остальных он выглядит вот так:

range1В следующей статье я расскажу как настроить input type range в CSS, ждите обновлений