Доброго времени суток 🙂
Сьогодні, розповім про один цікавий і корисний момент. Йтиметься про те, як вивести значення повзунка відразу ж після переміщення. Якщо Ви створюєте якусь цікаву форму на сайті, ну або як я, роблю плагін і мені потрібно було в його настройках використовувати повзунок. Але не просто повзунок, а щоб користувач зміг бачити значення яке він виставляє повзунком. Чи не приблизно, навмання, а точно.
Що таке повзунок? Це елемент форми, призначений для вибору одного з значень в заданому діапазоні. Наприклад якщо Ви задасте параметр від 1 до 100 то можна буде вибирати в цьому проміжку. Приклад того що вийде в наслідку можете подивитися по прикладі.
В першу чергу потрібна HTML розмітка. Можливо у Вас вже є потрібний повзунок якому потрібно додати висновок значення. Але я все ж ка приклад розмітку додам.
Як бачите у нас є форма. Всередині наш повзунок input type = "range". йому ми присвоюємо ID - rng. Це Важливий момент. Так само вказуємо наш діапазон значень:
- min = "1" - мінімальне значення одиниця.
- max = "100" -
- value = "50" - початкове значення. Це значення встановлено за замовчуванням.
Так само додаємо елемент - output. в якому виводиться поточне значення повзунка. Йому присвоюємо теж ID - ong, щоб надати стиль і для роботи скрипта і природно вказуємо якого повзунку він належить - for = "rng".
Тепер потрібно якраз і додати той самий висновок значення в реальному часі, а не після поновлення або відправки. Все це буде працювати за допомогою jQuery. Тому, в першу чергу потрібно перевірити чи підключена у вас бібліотека jQuery. Якщо так, то підключення можна пропустити.
В іншому випадки, потрібно в шапку перед закривається head або в підвал перед закривающімсяbody додати ось такий рядок:
Далі вже чергу самого скрипта, який і буде робити Висновок значення.
Як бачите в третьому рядку скрипта вказуємо ID нашого повзунка, тому вище я говорив що це важливо. Так само в 6 рядку вказано айди output. Якщо будете міняти айди на свої, то міняйте їх правильно і в скрипті. Більше варіантів немає, так що після цього можна перевіряти роботу повзунка. Якщо все зроблено правильно, то ви побачите результат.
На цьому все, спасибі за увагу. 🙂
Якщо Вам був корисним моя праця, можете підтримати сайт :)
Привіт дорогий друже
У тебе встановлено розширення AdBlock або подібне. Додай мій сайт в білий список, і тим самим внесеш свій внесок в його розвиток. Інструкція як відключити AdBlock Хочу й собі віконце