Что такое ползунок? Это элемент формы, предназначенный для выбора одного из значений в заданном диапазоне. Например если Вы зададите параметр от 1 до 100 то можно будет выбирать в этом промежутке. Пример того что получится в последствии можете посмотреть по примере.
В первую очередь нужна HTML разметка. Возможно у Вас уже есть нужный ползунок которому нужно добавить вывод значения. Но я все же ка пример разметку добавлю.
1 2 3 4 | <form> <input id="rng" name="rng" type="range" min="1" max="100" value="50"> <output id="ong" for="rng">50</output></form> |
Как видите у нас есть форма. Внутри наш ползунок input type="range", ему мы присваиваем ID - rng. Это Важный момент. Так же указываем наш диапазон значений:
- min="1" - минимальное значение единица.
- max="100" -
- value="50" - изначальное значение. Это значение установлено по-умолчанию.
Так же добавляем элемент - output, в котором выводится текущее значение ползунка. Ему присваиваем тоже ID - ong, чтобы придать стиль и для работы скрипта и естественно указываем какому ползунку он принадлежит - for="rng".
Теперь нужно как раз и добавить тот самый вывод значения в реальном времени, а не после обновления или отправки. Все это будет работать с помощью jQuery. Поэтому, в первую очередь нужно проверить подключена ли у вас библиотека jQuery. Если да, то подключение можно пропустить.
В противном случаи, нужно в шапку перед закрывающимся head или в подвал перед закрывающимсяbody добавить вот такую строку:
1 | <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> |
Далее уже очередь самого скрипта, который и будет делать Вывод значения.
1 2 3 4 5 6 7 8 9 10 11 12 | <script>$(function() {var el;$("#rng").change(function() {el = $(this);el.next("#ong").text(el.val());}).trigger('change');}); </script> |
Как видите в третей строке скрипта указываем ID нашего ползунка, поэтому выше я говорил что это важно. Так же в 6 строке указан айди output. Если будете менять айди на свои, то меняйте их правильно и в скрипте. Больше настроек нет, так что после этого можно проверять работу ползунка. Если все сделано правильно, то вы увидите результат.
На этом все, спасибо за внимание. 🙂
