Вверх

Ползунок или input type range в HTML5

polzunok-ili-input-type-range-v-html5

Сегодня узнал о нововведении в html5, а именно теперь можно в наш код прописать ползунок(или как его еще называют скроллер) который будет выдавать нам значения в виде цифр. В статье постараюсь описать все, что можно сотворить с этой «деталькой» нашего сайта 🙂

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

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

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

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

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

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

range-formula

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

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

Ползунок

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

1 бал2 бала3 бала4 бала5 балов (7 голос, средний бал: 2,71 из 5)
Загрузка...
     Вызвать мастера :)
Скопировать короткую ссылку

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: