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

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

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

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

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

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

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




Если Вам был полезным мой труд, можете поддержать сайт :)


Оцените статью
  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
Проголосовало: 9, в среднем: 4.9 из 5

Опубликовано 5 комментариев

  • Эдуард
    Комментариев: 1

    Нефига не работает, автора отпинать ногаи.

    • Виталий
      Комментариев: 521

      Если у автора работает, в примере работает, а у вас нет, то пинать нужно точно не автора 🙂

  • Вас
    Комментариев: 1

    Хуйня, а не ползунок! Почему значение не меняется, пока не отпустишь ползунок? А?

    • Виталий
      Комментариев: 521

      В январе написал статью для ограниченных вроде вас 🙂 http://gnatkovsky.com.ua/krasivyj-polzunok-vybora-znacheniya-ui-polzunok-na-sajt.html

  • Вячеслав
    Комментариев: 2

    читаю комментарии и диву даюсь, так и хочется сказать критикам: "Ребята, сделайте и вы что нибудь. Просто СДЕЛАЙТЕ что то, что будет полезным для людей, что нибудь, что облегчит жизнь, что поможет что то понять или открыть новое". Виталий, ВАМ СПАСИБО, вам по любому воздастся за ваши труды, нормальных людей в мире больше способных адекватно оценить ваши труды.

Добавить комментарий

Заполните поля ниже. Ваш e-mail не будет опубликован. Обязательные поля помечены *

Уважаемые пользователи! При добавлении комментариев на сайт Вам следует соблюдать правила указанные под формой отправки комментариев.

Соблюдайте добавления комментариев

Это не спам *

Нажмите, чтобы добавить код в комментарий
X

Привет дорогой друг

У тебя установлено расширение AdBlock или подобное. Добавь мой сайт в белый список, и тем самым внесешь свой вклад в его развитие. Инструкция как отключить AdBlock Хочу такое же окошко