Слайдеры и диапазоны (input type='range')

Тренажер по HTML для пользователей с начальным уровнем подготовки.

Опубликовано 04.04.2025
Просмотры 33
Автор
Рек. время прохождения 3 минуты
Упражнений 7
Комментарии 0
Тренажер HTML
На этой странице вы попрактикуетесь в создании слайдеров и ползунков с помощью HTML. Элемент <input type='range'> — это мощный инструмент для пользовательских интерфейсов, позволяющий выбирать числовое значение из заданного диапазона. Задания построены от простого к сложному: сначала мы создадим базовый слайдер, затем научимся задавать ему минимальное и максимальное значения, шаг изменения, начальное положение, а также связывать его с метками и выводить текущее значение для пользователя. Вы также узнаете, как стилизовать ползунки и добавлять к ним разметку с помощью дополнительных элементов. Эти навыки пригодятся при создании регуляторов громкости, яркости, ценовых фильтров и любых других элементов, где требуется плавный ввод числовых данных.
Список тем

Создание простого слайдера

id: 37855_range-1

Создайте базовый элемент-ползунок для выбора значения. Для этого используйте тег `<input>` и укажите правильный тип, чтобы браузер отобразил его как слайдер.

CSS
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  background-color: #f0f2f5;
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  margin: 0;
}
.slider-container {
  background-color: #ffffff;
  padding: 25px 20px;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 320px;
}
input[type="range"] {
  width: 100%;
}
HTML
<div class="slider-container">
  <input input1="range">
</div>
Чтобы создать слайдер, нужно использовать тег `<input>`. Его тип должен быть указан как `range` в соответствующем атрибуте.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Установка диапазона значений

id: 37855_range-2

По умолчанию диапазон слайдера от 0 до 100. Ограничьте диапазон ползунка, установив минимальное значение `10` и максимальное значение `90` с помощью соответствующих атрибутов.

CSS
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  background-color: #f0f2f5;
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  margin: 0;
}
.slider-container {
  background-color: #ffffff;
  padding: 25px 20px;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 320px;
  text-align: center;
}
input[type="range"] {
  width: 100%;
}
HTML
<div class="slider-container">
  <input type="range" input1="10" input2="90">
</div>
Для установки минимального и максимального значений используются атрибуты `min` и `max` соответственно. Просто добавьте их к тегу `<input>`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Настройка шага ползунка

id: 37855_range-3

Сделайте так, чтобы значение ползунка изменялось не плавно, а с шагом в `5` единиц. Используйте для этого специальный атрибут.

CSS
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  background-color: #f0f2f5;
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  margin: 0;
}
.slider-container {
  background-color: #ffffff;
  padding: 25px 20px;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 320px;
  text-align: center;
}
input[type="range"] {
  width: 100%;
}
HTML
<div class="slider-container">
  <input type="range" min="0" max="100" input1="5">
</div>
Для управления шагом изменения значения слайдера используется атрибут `step`. Присвойте ему нужное числовое значение.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Установка начального значения

id: 37855_range-4

Задайте начальное положение ползунка на отметке `75`. При загрузке страницы он сразу будет установлен в этой позиции.

CSS
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  background-color: #f0f2f5;
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  margin: 0;
}
.slider-container {
  background-color: #ffffff;
  padding: 25px 20px;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 320px;
  text-align: center;
}
input[type="range"] {
  width: 100%;
}
HTML
<div class="slider-container">
  <input type="range" min="0" max="100" step="25" input1="75">
</div>
Чтобы задать начальное значение для элемента ввода, включая слайдер, используется атрибут `value`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Связывание слайдера с меткой

id: 37855_range-5

Установите семантическую связь между текстовой меткой 'Громкость' и ползунком. Это улучшает доступность и позволяет активировать слайдер, кликнув на текст. Используйте идентификатор `volume-slider`.

CSS
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  background-color: #f0f2f5;
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  margin: 0;
}
.slider-container {
  background-color: #ffffff;
  padding: 25px 20px;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 320px;
  text-align: center;
}
label {
  display: block;
  margin-bottom: 10px;
  font-weight: 600;
}
input[type="range"] {
  width: 100%;
}
HTML
<div class="slider-container">
  <label input1="volume-slider">Громкость</label>
  <input type="range" input2="volume-slider">
</div>
Чтобы связать `<label>` и `<input>`, используйте атрибут `for` у метки и `id` у поля ввода. Значения этих атрибутов должны совпадать.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Отображение текущего значения

id: 37855_range-6

Чтобы пользователь видел точное значение слайдера, часто используют элемент `<output>`. Добавьте его и свяжите с ползунком с `id` 'brightness-slider'. Необходимый JavaScript для обновления значения уже добавлен.

CSS
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  background-color: #f0f2f5;
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  margin: 0;
}
.slider-container {
  background-color: #ffffff;
  padding: 25px 20px;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 320px;
  text-align: center;
}
label {
  display: block;
  margin-bottom: 10px;
  font-weight: 600;
}
output {
  font-weight: bold;
  color: #007bff;
  font-family: monospace;
  font-size: 1.2em;
  margin-left: 5px;
}
input[type="range"] {
  width: 100%;
  margin-top: 10px;
}
HTML
<div class="slider-container">
  <label for="brightness-slider">Яркость: 
    <input1 for="brightness-slider" id="value-display">50</input1>%
  </label>
  <input type="range" id="brightness-slider" value="50" oninput="document.getElementById('value-display').value = this.value">
</div>
Используйте тег `<output>`. Чтобы связать его со слайдером для наглядности и доступности, можно использовать атрибут `for`, как и у `<label>`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Слайдер с отметками

id: 37855_range-7

Добавьте к ползунку визуальную шкалу с отметками '0', '50' и '100'. Для этого нужно создать список данных `<datalist>` и связать его со слайдером, используя идентификатор `tickmarks`.

CSS
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  background-color: #f0f2f5;
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  margin: 0;
}
.slider-container {
  background-color: #ffffff;
  padding: 25px 20px;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 320px;
  text-align: center;
}
input[type="range"] {
  width: 100%;
}
datalist {
  display: flex;
  justify-content: space-between;
  color: #6c757d;
  width: 100%;
  font-size: 0.9em;
}
HTML
<div class="slider-container">
  <input type="range" input1="tickmarks" min="0" max="100" step="50" value="50">
  <datalist input2="tickmarks">
    <option>0</option>
    <input3>50</input3>
    <option>100</option>
  </datalist>
</div>
Чтобы связать `<input>` со списком `<datalist>`, используйте атрибут `list` у слайдера. Его значение должно совпадать с `id` тега `<datalist>`. Внутри `<datalist>` разместите теги `<option>` для каждой отметки.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку
Предыдущая темаСледующая тема
НайтиКурс.Ру