Дизайн та розробка сайту

Вывод значения ползунка

Вывод значения ползунка

Доброго времени суток 🙂

Сегодня, расскажу про один интересный и полезный момент. Речь пойдет о том, как вывести значение ползунка сразу же после перемещения. Если Вы создаете какую нибудь интересную форму на сайте, ну или как я, делаю плагин и мне нужно было в его настройках использовать ползунок. Но не просто ползунок, а чтобы пользователь смог видеть значение которое он выставляет ползунком. Не примерно, наугад, а точно.

Вывод значения ползунка

Что такое ползунок? Это элемент формы, предназначенный для выбора одного из значений в заданном диапазоне. Например если Вы зададите параметр от 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. Это Важный момент. Так же указываем наш диапазон значений:

  • min="1" - минимальное значение единица.
  • max="100" -
  • value="50" - изначальное значение. Это значение установлено по-умолчанию.

Так же добавляем элемент - 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. Если будете менять айди на свои, то меняйте их правильно и в скрипте. Больше настроек нет, так что после этого можно проверять работу ползунка. Если все сделано правильно, то вы увидите результат.

На этом все, спасибо за внимание. 🙂

Дизайн та розробка сайту

Back to top