Как добавить ползунок в html
Перейти к содержимому

Как добавить ползунок в html

  • автор:

Ползунок

Ползунок предназначен для ввода чисел в указанном диапазоне, но в отличие от поля имеет другой интерфейс и применяется в тех случаях, когда не особенно важно указывать точное значение. Браузеры по своему отображают вид ползунка, так на рис. 1 продемонстрирован вид ползунка в Chrome.

Рис. 1. Вид ползунка

Синтаксис создания ползунка следующий.

Здесь min — минимальное число в диапазоне (по умолчанию 0), max — максимальное число (по умолчанию 100), step — шаг изменения чисел (по умолчанию 1), value — текущее значение. По умолчанию value вычисляется по формуле:

Если значение max меньше, чем значение min , то value равно min .

Атрибуты не являются обязательными, их можно опустить, в таком случае они принимают значения по умолчанию. Независимо от минимального и максимального числа ширина ползунка остаётся одинаковой.

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

Пример 1. Использование ползунка

Ползунок function sizePic()

Размер рисунка:

В данном примере при управлении ползунком срабатывает событие onchange , которое вызывает функцию sizePic . Эта функция изменяет размер изображения в зависимости от установленного пользователем значения ползунка. Тем самым ширина картинки при желании уменьшается или наоборот, увеличивается. Результат примера в браузере IE показан на рис. 2.

Управление шириной картинки с помощью ползунка

Рис. 2. Управление шириной картинки с помощью ползунка

Старые версии браузеров, которые не поддерживают значение range для атрибута type , отображают поле формы как текстовое.

Автор: Влад Мержевич
Последнее изменение: 15.02.2024

  • Текст
  • Фон
  • Ссылки
  • Списки
  • Изображения
  • Таблицы
  • Формы
    • Отправка данных формы
    • Текстовое поле
    • Поле для ввода пароля
    • Многострочное текстовое поле
    • Кнопки
    • Элемент label
    • Переключатели
    • Флажки
    • Поле со списком
    • Скрытое поле
    • Поле с изображением
    • Загрузка файлов
    • Адрес электронной почты
    • Веб-адрес
    • Выбор цвета
    • Ввод чисел
    • Ползунок
    • Календарь
    • Поле для поиска
    • Номер телефона
    • Группирование элементов форм
    • Блокирование элементов форм
    • Автофокус
    • Подсказывающий текст
    • Защита от дурака

    Ползунок

    Ползунок предназначен для ввода чисел в указанном диапазоне, но в отличие от поля имеет другой интерфейс и применяется в тех случаях, когда не особенно важно указывать точное значение. На рис. 1 продемонстрирован вид ползунка в разных браузерах.

    Вид ползунка

    Рис. 1. Вид ползунка в браузерах

    Синтаксис создания ползунка следующий.

    Здесь min — минимальное число в диапазоне (по умолчанию 0), max — максимальное число (по умолчанию 100), step — шаг изменения чисел (по умолчанию 1), value — текущее значение. По умолчанию value вычисляется по формуле:

    Если значение max меньше, чем значение min , то value равно min .

    Атрибуты не являются обязательными, их можно опустить, в таком случае они принимают значения по умолчанию.

    Независимо от минимального и максимального числа ширина ползунка остаётся одинаковой.

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

    Пример 1. Использование ползунка

    HTML5 IE 10 Cr Op Sa Fx

        Ползунок function sizePic() 

    Размер рисунка:

    В данном примере при управлении ползунком срабатывает событие oninput , которое вызывает функцию sizePic . Эта функция изменяет размер изображения в зависимости от установленного пользователем значения ползунка. Тем самым ширина картинки при желании уменьшается или наоборот, увеличивается. Результат примера при крайнем значении ползунка в браузере Chrome показан на рис. 2.

    Управление шириной картинки с помощью ползунка

    Рис. 2. Управление шириной картинки с помощью ползунка

    Старые версии браузеров, которые не поддерживают значение range для атрибута type , отображают поле формы как текстовое.

    Значение range

    Тип range (от англ. «range» ‒ «диапазон, спектр») создаёт ползунок.

    Внешний вид

    • Внешний вид ползунка‒ ползунок;
    • Внешний вид ползунка с фокусом‒ фокус;
    • Внешний вид ползунка с наведённым на него курсором‒ наведение курсора.

    Примечание

    В большинстве браузеров по умолчанию ручка ползунка всегда находится посередине.

    Поддержка браузерами

    Спецификация

    Верс. Раздел
    HTML
    2.0 Input Field: INPUT
    3.2 INPUT text fields, radio buttons, check boxes, .
    4.01 17.4.1 Control types created with INPUT
    5.0 4.10.5.1.10 Range state (type=range)
    5.1 4.10.5.1.13. Range state (type=range)
    XHTML
    1.0 Extensible HyperText Markup Language
    1.1 Extensible HyperText Markup Language

    Сопутствующие атрибуты

    autocomplete Автозаполнение значения (положения) ползунка. autofocus Автоматческая фокусировка на ползунке после полной загрузки страницы. disabled Блокировка ползунка.

    Внешний вид заблокированного ползунка

    disabled=»disabled»

    form Присоединение ползунка к форме. list Создание дополнительных меток на шкале ползунка.

    Внешний вид ползунка с дополнительными метками

    max Указывает, максимальное значение ползунка.

    Значение по умолчанию: « 100 ».

    min Указывает, минимальное значение ползунка.

    Значение по умолчанию: « 0 ».

    name Присваивает имя ползунку. step Устанавливает интервал увеличения значения (перемещения) ползунка.

    Значение по умолчанию: « 1 ».

    value Указывает числовое значение ползунка, отправляемое на сервер или используемое сценариями.

    Примечание: Данный атрибут должен иметь значение, являющееся допустимым числом с плавающей точкой.

    Внешний вид ползунка с заданным значением

    min=»0″ max=»10″ value=»8″

    Ползунок в HTML (оформление и вывод значения)

    Всем привет!
    Сделать ползунок в HTML – не проблема, для многих сделать это – проще простого. А вот оформить и красиво вывести значение ползунка умеют не все.
    Так вот, в сегодняшней статье я расскажу, как создать ползунок, как вывести результат и как оформить ползунок.

    С чего же начнем? Начнем с того, что я покажу, каким тегом создается ползунок, и какие атрибуты у него есть.
    Для создания ползунка в HTML существует тег «input»:

    В результате получится вот такое:

    Заметьте, что ручка ползунка всегда находится посредине, а специальным атрибутом это можно изменить, впрочем, не только это.

    • Autocomplete — автозаполнение значения (положения) ползунка.
    • Autofocus — автоматческая фокусировка на ползунке после полной загрузки страницы.
    • Disabled — блокировка ползунка. Пример:

    Обратите внимание на имя « rangeList1 ». Посмотрите, где я его прописал в коде. Это имя может быть любым, но должно быть уникальным и писаться латинскими буквами. Имя в id должно соответствовать имени « list ».

    Name — присваивает имя ползунку.
    Step — устанавливает интервал увеличения значения (перемещения) ползунка.
    Значение по умолчанию: «1».
    Value — указывает числовое значение ползунка, отправляемое на сервер или используемое сценариями.

    Как вывести значение ползунка?

    Все, конечно, круто, но какой смысл в ползунке, если он ничего не выводит.
    Сейчас мы все исправим и выведем значение средствами JavaScript без какой-либо магии.

    onchange="document.getElementById('rangeValue').innerHTML = this.value;"

    Вот этот код нужно вставить в ползунок.
    Заметьте, если в скобках вы указали « rangeValue », тогда при выводе результата нужно тоже указать это же имя, а иначе работать не будет:

    Полный пример:
       А вот и результат:

    Также в интернете нашел вот такой способ, как мне показалось, очень интересный:

    Как оформить ползунок?

    Итак, мы имеем стандартный ползунок, и отображается он на каждом браузере по-разному:

    Ползунок в HTML (оформление и вывод значения)

    Приступим к изменению вида

    В браузерах Chrome, Safari и Opera

    Отменим стандартные стили Webkit/Chrome. Для этого зададим свойству « -webkit-appearance » значение « none »:

    input[type=range]

    Вот теперь можно добавить любые свойства, например, границу, цвет фона, закругление границы и так далее, что только душа пожелает:

    input[type=range]::-webkit-slider-runnable-track

    В результате это выглядит пока что вот так:

    Теперь изменим ползунок:

    input[type=range]::-webkit-slider-thumb

    В браузере Firefox

    Псевдоэлемент « ::-moz-range-track » повлияет на полосу ползунка, а « ::-moz-range-track » повлияет на ручку ползунка.

    input[type=range]::-moz-range-track < border-radius: 10px; height: 10px; border: 1px solid #666; background-color: #ccc; >input[type=range]::-moz-range-thumb

    В браузере Internet Explorer

    Дошла очередь до самого известного и самого корявого, как по мне, браузера Internet Explorer:

    input[type=»range»]::-ms-track < border-radius: 10px; height: 10px; border: 1px solid #666; background-color: #ccc; >input[type=»range»]::-ms-thumb

    Так что, если хотите, чтобы ползунки более-менее отображались одинаково на всех браузерах, придется писать большой код на CSS, для каждого браузера свой.

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *