Ползунок предназначен для ввода чисел в указанном диапазоне, но в отличие от поля имеет другой интерфейс и применяется в тех случаях, когда не особенно важно указывать точное значение. На рис. 1 продемонстрирован вид ползунка в разных браузерах.
Рис. 1. Вид ползунка в браузерах
Синтаксис создания ползунка следующий.
Здесь min - минимальное число в диапазоне (по умолчанию 0), max - максимальное число (по умолчанию 100), step - шаг изменения чисел (по умолчанию 1), value - текущее значение. По умолчанию value вычисляется по формуле:
Если значение max меньше, чем значение min , то value равно min .
Атрибуты не являются обязательными, их можно опустить, в таком случае они принимают значения по умолчанию.
Независимо от минимального и максимального числа ширина ползунка остаётся одинаковой.
Сами ползунки редко применяются в «чистом» виде, поскольку не обеспечивают необходимую обратную связь с пользователем, а вот в сочетании с JavaScript это становится мощным и удобным элементом интерфейса. В примере 1 с помощью ползунка изменяется размер изображения, такая возможность часто используется в различных фотогалереях.
Пример 1. Использование ползунка
HTML5 IE 10 Cr Op Sa Fx
Ползунок function sizePic() { size = document.getElementById("size").value; img = document.getElementById("pic"); img.width = 60 + 20*size; }
Размер рисунка:
В данном примере при управлении ползунком срабатывает событие oninput , которое вызывает функцию sizePic . Эта функция изменяет размер изображения в зависимости от установленного пользователем значения ползунка. Тем самым ширина картинки при желании уменьшается или наоборот, увеличивается. Результат примера при крайнем значении ползунка в браузере Chrome показан на рис. 2.
Рис. 2. Управление шириной картинки с помощью ползунка
Старые версии браузеров, которые не поддерживают значение range для атрибута type , отображают поле формы как текстовое.
И результат применения ползунка в коде:
Для работы с ползунком введены следующие атрибуты:
- max — максимальное значение элемента (соответствует крайнее правое положение ползунка). Число.
- min — минимальное значение элемента (соответствует крайнее левое положение ползунка). Число.
- step — шаг ползунка. Число.
Пример применения атрибутов, представлен ниже.
|
Кроме того, как и с любым элементов HTML к input type="range" можно применить оформление CSS.
Как работать с ползунком в JSПоскольку ползунок — это элемент Input, то для считывания его значения можно применять свойство value. В следующем примере мы будем считывать значение ползунка и выводить его в абзац.
function fun1() { var rng=document.getElementById("r1"); //rng - это Input var p=document.getElementById("one"); // p - абзац p.innerHTML=rng.value; }
function fun1 () { var rng = document . getElementById (& #x27;r1"); //rng - это Input var p = document . getElementById (& #x27;one"); // p - абзац p . innerHTML = rng . value ; |
Обратите внимание на новое событие oninput. Событие OnInput — срабатываем при любом изменении в элементе формы, например при вводе нового символа, или при перемещении ползунка на 1px. В отличие от события OnChange — которое срабатываем только при потере фокуса элементом, oninput срабатываем при любом изменении в элементе. Данное событие добавляет ползунку интерактивности.
Событие onchange также удобно использовать вместе с элементом select .
Практическое заданиеЗадание 1. Замените событие OnInput в представленном примере на событие onchange. Изучите как изменилось поведение элементов. Когда происходит обновление значения в абзаце?
Задание 2. Задайте ползунку минимальное значение 50, а максимальное 150. Изучите какое минимальное и максимальное значение выводиться в абзаце?
Задание 3. Задайте шаг ползунка равным 10. Как происходит изменение значений в абзаце?
Задание 4. Задайте шаг изменения значений равным 7. Как измениться максимальное и минимальное значение?
Продолжаем работать с ползунком rangeВнимание! Значения считанные из свойства value являются строкой. Не забывайте их переводить в число с помощью функции parseInt(ваша строка).
Давайте решим простую задачу: выведем значение ползунка в input. Для этого необходимо значение свойства ползунок.value передать в свойство input.value. Пример представлен ниже:
function fun1() { var rng=document.getElementById("r1"); //rng - это ползунок var i1=document.getElementById("i1"); // i1 - input i1.value=rng.value; }
Практическое заданиеЗадание 5. Изучите работу примера приведенного выше. Добавьте в input type="text" событие oninput="fun2()". Для функции fun2 запрограммируйте обратную задачу — те значения которые вводятся в input автоматически присваиваются ползунку.
Для закрепления давайте выполним еще одно задание: с помощью ползунка будем изменять размер блока div. Верстка задачи представлена ниже:
Ползунок предназначен для ввода чисел в указанном диапазоне, но в отличие от поля имеет другой интерфейс и применяется в тех случаях, когда не особенно важно указывать точное значение. Браузеры по своему отображают вид ползунка, так на рис. 1 продемонстрирован вид ползунка в Chrome.
Рис. 1. Вид ползунка
Синтаксис создания ползунка следующий.
Здесь min - минимальное число в диапазоне (по умолчанию 0), max - максимальное число (по умолчанию 100), step - шаг изменения чисел (по умолчанию 1), value - текущее значение. По умолчанию value вычисляется по формуле:
Если значение max меньше, чем значение min , то value равно min .
Атрибуты не являются обязательными, их можно опустить, в таком случае они принимают значения по умолчанию. Независимо от минимального и максимального числа ширина ползунка остаётся одинаковой.
Сами ползунки редко применяются в «чистом» виде, поскольку не обеспечивают необходимую обратную связь с пользователем, а вот в сочетании с JavaScript это становится мощным и удобным элементом интерфейса. В примере 1 с помощью ползунка изменяется размер изображения, такая возможность часто используется в различных фотогалереях.
Пример 1. Использование ползунка
Ползунок function sizePic() { size = document.getElementById("size").value; img = document.getElementById("pic"); img.width = 60 + 20*size; }
Размер рисунка:
В данном примере при управлении ползунком срабатывает событие onchange , которое вызывает функцию sizePic . Эта функция изменяет размер изображения в зависимости от установленного пользователем значения ползунка. Тем самым ширина картинки при желании уменьшается или наоборот, увеличивается. Результат примера в браузере IE показан на рис. 2.
Всем привет, решил написать статью о том как можно стилизовать элемент html 5 input с типом range, этакий ползунок, удобный и современный Так же покажу как работать с ним через JavaScript, на примере JQuery. Хочу сразу сказать, со стилизацией проблем практически не возникает, но вот если тебе нужно еще и какие то действия с ним выполнять, тут есть подводные камни о которых я расскажу ниже. Некоторые решение есть, но как только будут основные решения я обязательно дополню статью Поехали =)
input type range htmlДля начала давай просто напишем код html, я добавлю два input с типом range, один будет показан как изначальный вид в браузере а другой мы будем менять и зададим ему сразу класс range:
Я уже создал файл для написание кода JS, файл с таблицами стилей и подключил библиотеку JQuery У обоих инпутов одинаковые максимальны и минимальные значения, а так же начальное значение установил на 25
Открываем файл со стилями и сразу задам стили для html, body и блока с классом wrp:
Зададим стили для нормальных браузеров типа хрома, тут конечно кому как Зададим стили для класса.range:
Тем самым мы как бы обнуляем стандартные стили и можно смело писать свои стили для самой линии трека.
Тут нет ничего сверхъестественного, поэтому каждый делает свой вид линии трека как нравится. Теперь зададим стили для ползунка, та штучка за которую мы тянем или передвигаем как в плеере Чтобы задать стили для ползунка нужно добавить псевдоэлемент ::-webkit-slider-thumb и так же обнулить стили и дальше делать как нужно нам
Тоже все понятно и просто, единственное кто может не знает про последнее свойство transition , это для задания анимированного перехода между состояниями, то есть у меня будет псевдокласс :hover , и чтобы был плавный переход я добавил это свойство Давайте добавим:hover, но еще и:active
Тоже все просто и гладко. Если мы откроем в хроме или в яндекс браузере к примеру, то все выглядит как нужно. Для остальных же браузеров во всех местах вместе webkit добавляем нужный нам, то есть:
- для мозиллы moz,
- для оперы o,
- для IE ms, но про InternetExplorer поговорим позже Учитывайте, что стили для каждого браузера придется повторять, иначе если совместить и написать псевдоэлементы через запятую, работать не будет. Ниже я покажу какой псевдоэлемент для кого
Я если честно не знаю как она правильно называется, но это та полоса, которая идет за нашим ползунком когда мы его тянем или передвигаем, это может быть полоса загрузки, процесса, прогресса, индикатор какой-то не знаю в общем, но думаю вы поняли о чем речь, ведь мы с вами на одной волне, если че на картинке ниже она синего цвета:D Так вот, чтобы ее сделать нужно свойство background или background-image кто как делает
Для браузера Firefox вместо webkit
используем moz
. Жирным я выделил те места, где мы меняем значения чтобы полоса подвинулась вместе со значением самого инпута. Если сейчас мы будем двигать то полоса двигаться не будет, об этом поговорим позже
Как и обещал я пишу список какие стили для какого браузера подойдут
Это подходит для хрома, яндекса, оперы и сафари:
Мозилла, тут немного по другому, но тоже просто
Тут вообще по другому, с ума сойдешь с этими браузерами В общем IE как бы делит наш инпут на три части, поэтому вот такие правила:
Лично я не тестил на IE, так как после его установки у меня полетела винда и больше я этого не делал, тут буду подправлять что узнаю нового =)
input range JQueryЭто я уже писал выше, этим и пользуемся
Схема такая, если мы поставим обработчик события "change" и по нему будем получать value инпута, а затем менять css свойства, то будет работать так: передвигаем ползунок и отпускаем кнопку мыши, затем только передвинется линия.
И это логично, но не совсем красиво, поэтому я предлагаю другое решение
Открываем файл script.js или пишем в самом html, не важно, и пишем вот такую функцию:
Все просто, тоже самое чтобы мы и делали при событии change, получили value и поменяли стили в нужных местах, только учитывайте, что значения должны быть в процентах, так как у меня в инпуте от 0 до 100, то я ни чего не вычисялю, но если было бы к примеру от 0 до 120, то я бы полученное валуе пропускал бы через формулу (val*100)/120 , то есть получал бы процент от числа Думаю это понятно Дальше, чтобы это наконец заработало нужно указать в событии oninput элемента инпут данную функцию:
Вот и все, теперь будет работать
Ну а теперь камни в почках, про которые я говорил в начале
Известный мне камень на сегодня, так это то, что эта функция не будет работать в мозилле Почему не будет?
Ответ прост и плавает на поверхности, так как для мозиллы мы можем изменить стили только с помощью псевдоэлемента, а для JavaScript псевдоэлементов в DOM не существует, так и работать мы с ним не можем. Если была бы задача единоразовая, примеру просто поменять цвет, мы могли использовать просто второй класс, но в данном случае ребята я пока ни чего не нашел и не придумал, кто знает пишите =)
ЗаключениеВ принципе это все, но как только приедет вагон с доп порцией, я обязательно добавлю в статью Всем спасибо, пока =)
Антивирус Bitdefender: эффективный защитник Без вопросов
Значение слова неудачный
Обзор Samsung Galaxy A7 (2017): не боится воды и экономии Стоит ли покупать samsung a7
Делаем бэкап прошивки на андроиде
Как настроить файл подкачки?