Повзунок в HTML (оформлення та висновок значення)
Всім привіт!
Зробити повзунок в HTML - не проблема, для багатьох зробити це - простіше простого. А ось оформити і красиво вивести значення повзунка вміють не всі.
Так ось, в сьогоднішній статті я розповім, як створити повзунок, як вивести результат і як оформити повзунок.
З чого ж почнемо? Почнемо з того, що я покажу, яким тегом створюється повзунок, і які атрибути у нього є.
Для створення повзунка в HTML існує тег «input»:
В результаті вийде ось таке:
Зауважте, що ручка повзунка завжди знаходиться посередині, а спеціальним атрибутом це можна змінити, втім, не тільки це.
- Autocomplete - автозаповнення значення (положення) повзунка.
- Autofocus - автоматческая фокусування на повзунку після повного завантаження сторінки.
- Disabled - блокування повзунка. приклад:
- Max - вказує максимальне значення повзунка.
Значення за замовчуванням: «100». - Min - вказує мінімальне значення повзунка.
Значення за замовчуванням: «0». - List - створення міток на шкалі повзунок.
Зверніть увагу на ім'я «rangeList1». Подивіться, де я його прописав в коді. Це ім'я може бути будь-яким, але має бути унікальним і писатися латинськими буквами. Ім'я в id повинна відповідати імені «list».
Name - привласнює ім'я повзунку.
Step - встановлює інтервал збільшення значення (переміщення) повзунка.
Значення за замовчуванням: «1».
Value - вказує числове значення повзунка, що відправляється на сервер або використовується сценаріями.
Як вивести значення повзунка?
Ось цей код потрібно вставити в повзунок.
Зауважте, якщо в дужках ви вказали «rangeValue», тоді при виведенні результату потрібно теж зазначити це ж ім'я, а інакше працювати не буде:
А ось і результат:
Також в інтернеті знайшов ось такий спосіб, як мені здалося, дуже цікавий:
Як оформити повзунок?
Отже, ми маємо стандартний повзунок, і відображається він на кожному браузері по-різному:
Приступимо до зміни виду
У браузерах Chrome, Safari і Opera
Скасуємо стандартні стилі Webkit / Chrome. Для цього задамо властивості «-webkit-appearance» значення «none»:
Ось тепер можна додати будь-які властивості, наприклад, кордон, колір фону, закруглення кордону і так далі, що тільки душа забажає:
В результаті це виглядає поки що ось так:
Тепер змінимо повзунок:
У браузері Firefox
Псевдоелемент «. -moz-range-track »вплине на смугу повзунка, а«. -moz-range-track »вплине на ручку повзунка.
У браузері Internet Explorer
Дійшла черга до найвідомішого і корявого, як на мене, браузера Internet Explorer:
Так що, якщо хочете, щоб повзунки більш-менш відображалися однаково на всіх браузерах, доведеться писати великий код на CSS, для кожного браузера свій.