Доброго времени суток 🙂
Сегодня, расскажу про один интересный и полезный момент. Речь пойдет о том, как вывести значение ползунка сразу же после перемещения. Если Вы создаете какую нибудь интересную форму на сайте, ну или как я, делаю плагин и мне нужно было в его настройках использовать ползунок. Но не просто ползунок, а чтобы пользователь смог видеть значение которое он выставляет ползунком. Не примерно, наугад, а точно.
Что такое ползунок? Это элемент формы, предназначенный для выбора одного из значений в заданном диапазоне. Например если Вы зададите параметр от 1 до 100 то можно будет выбирать в этом промежутке. Пример того что получится в последствии можете посмотреть по примере.
В первую очередь нужна HTML разметка. Возможно у Вас уже есть нужный ползунок которому нужно добавить вывод значения. Но я все же ка пример разметку добавлю.
<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. Это Важный момент. Так же указываем наш диапазон значений:
Так же добавляем элемент - output, в котором выводится текущее значение ползунка. Ему присваиваем тоже ID - ong, чтобы придать стиль и для работы скрипта и естественно указываем какому ползунку он принадлежит - for="rng".
Теперь нужно как раз и добавить тот самый вывод значения в реальном времени, а не после обновления или отправки. Все это будет работать с помощью jQuery. Поэтому, в первую очередь нужно проверить подключена ли у вас библиотека jQuery. Если да, то подключение можно пропустить.
В противном случаи, нужно в шапку перед закрывающимся head или в подвал перед закрывающимсяbody добавить вот такую строку:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
Далее уже очередь самого скрипта, который и будет делать Вывод значения.
<script>
$(function() {
var el;
$("#rng").change(function() {
el = $(this);
el
.next("#ong")
.text(el.val());
})
.trigger('change');
});
</script>
Как видите в третей строке скрипта указываем ID нашего ползунка, поэтому выше я говорил что это важно. Так же в 6 строке указан айди output. Если будете менять айди на свои, то меняйте их правильно и в скрипте. Больше настроек нет, так что после этого можно проверять работу ползунка. Если все сделано правильно, то вы увидите результат.
На этом все, спасибо за внимание. 🙂