Bootstrap - Slider Demo: A Comprehensive Guide for Beginners

Привет,野心勃勃 веб-разработчики! Сегодня мы отправляемся в захватывающее путешествие в мир слайдеров Bootstrap. Как ваш добрый邻里 компьютерный учитель, я здесь, чтобы провести вас через это приключение шаг за шагом. Так что возьмите любимый напиток, устройтесь поудобнее и погружайтесь с нами!

Bootstrap - Slider Demo

Что такое Bootstrap Slider?

Прежде чем мы начнем программировать, давайте поймем, с чем мы имеем дело. Слайдер Bootstrap - это компонент пользовательского интерфейса, который позволяет пользователям выбирать значение из диапазона, передвигая рукоятку по полосе. Это как цифровая версия тех регуляторов громкости, которые вы видите на старых радиоприемниках - довольно мило, не так ли?

Почему использовать Bootstrap Sliders?

Слайдеры fantastic для:

Выбора числовых значений в диапазоне
Настройки параметров, таких как громкость или brightness
Фильтрации данных на основе диапазона (думайте о диапазонах цен на торговых сайтах)

Теперь, когда мы знаем, что это такое и почему это полезно, давайте脏 our hands с кодом!

Настройка вашей среды Bootstrap

Перво-наперво, нам нужно настроить нашу среду Bootstrap. Не волнуйтесь; это легче, чем настроить новый смартфон!

Шаг 1: Включите Bootstrap CSS и JS

Добавьте следующие строки в секцию <head> вашего HTML-файла:

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

Эти строки как будто зовут Bootstrap на ваш кодинг-вечеринку. Они приносят все классные стили и функции, которые нам понадобятся.

Создание вашего первого Bootstrap Slider

Теперь давайте создадим базовый слайдер. Это так же просто, как сделать toast - ну, может быть, немного сложнее, но вы быстро схватите это!

Шаг 2: HTML Structure

Добавьте этот код в тело вашего HTML:

<div class="container mt-5">
<h2>Мой первый Bootstrap Slider</h2>
<input type="range" class="form-range" min="0" max="100" step="1" id="customRange">
<p>Значение: <span id="rangeValue"></span></p>
</div>

Разберем это:

<div class="container mt-5">: Это создает контейнер срым верхним отступом.
<input type="range">: Это наш слайдер ввода.
class="form-range": Этот класс Bootstrap стилизует наш ввод как слайдер.
min="0" max="100" step="1": Эти значения устанавливают минимальное, максимальное и шаговые значения.
<p>Значение: <span id="rangeValue"></span></p>: Это будет отображать наше выбранное значение.

Шаг 3: JavaScript Magic

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

<script>
const slider = document.getElementById('customRange');
const output = document.getElementById('rangeValue');
output.innerHTML = slider.value; // Отображаем значение по умолчанию слайдера

// Обновляем текущее значение слайдера (каждый раз, когда вы передвигаете рукоятку слайдера)
slider.oninput = function() {
output.innerHTML = this.value;
}
</script>

Этот скрипт делает две вещи:

Отображает�始альное значение слайдера.
Обновляет отображаемое значение whenever вы передвигаете слайдер.

Настройка вашего слайдера

Теперь, когда у нас есть базовый слайдер, давайте немного его украсим. Время надеть наши шляпы дизайнеров!

Шаг 4: Добавление стиля

Добавим немного пользовательского CSS, чтобы наш слайдер stood out:

<style>
.custom-range {
width: 300px;
}
.custom-range::-webkit-slider-thumb {
background: #007bff;
}
.custom-range::-moz-range-thumb {
background: #007bff;
}
</style>

Добавьте это в секцию <head> вашего HTML-файла. Оно изменяет ширину слайдера и colorizes рукоятку (часть, которую вы передвигаете) в синий цвет.

Шаг 5: Создание двойного слайдера

Теперь давайте создадим что-то немного более сложное - двойной слайдер для выбора диапазона:

<div class="container mt-5">
<h2>Селектор ценового диапазона</h2>
<div class="row">
<div class="col-sm-6">
<input type="range" class="form-range custom-range" min="0" max="1000" step="10" id="minPrice">
<p>Минимальная цена: $<span id="minValue"></span></p>
</div>
<div class="col-sm-6">
<input type="range" class="form-range custom-range" min="0" max="1000" step="10" id="maxPrice">
<p>Максимальная цена: $<span id="maxValue"></span></p>
</div>
</div>
</div>

И соответствующий JavaScript:

<script>
const minSlider = document.getElementById('minPrice');
const maxSlider = document.getElementById('maxPrice');
const minOutput = document.getElementById('minValue');
const maxOutput = document.getElementById('maxValue');

minOutput.innerHTML = minSlider.value;
maxOutput.innerHTML = maxSlider.value;

minSlider.oninput = function() {
minOutput.innerHTML = this.value;
if (parseInt(this.value) > parseInt(maxSlider.value)) {
maxSlider.value = this.value;
maxOutput.innerHTML = this.value;
}
}

maxSlider.oninput = function() {
maxOutput.innerHTML = this.value;
if (parseInt(this.value) < parseInt(minSlider.value)) {
minSlider.value = this.value;
minOutput.innerHTML = this.value;
}
}
</script>

Это создает два слайдера, которые работают вместе, чтобы выбрать ценовой диапазон. Скрипт обеспечивает, чтобы минимальная цена никогда не exceed максимальную цену и vice versa.

Заключение

Поздравляю! Вы только что создали свои первые слайдеры Bootstrap. От простого одного слайдера до более сложного двойного селектора диапазона, вы прошли долгий путь. Помните, что практика делает perfect, так что не бойтесь экспериментировать с различными стилями и функциональностями.

Вот быстрый обзор того, что мы узнали:

Концепция	Описание
Настройка Bootstrap	Включение Bootstrap CSS и JS в ваш HTML
Базовый слайдер	Создание простого range input, стилизованного с помощью Bootstrap
JavaScript Interaction	Использование JavaScript для отображения и обновления значений слайдера
Пользовательское стилирование	Применение пользовательского CSS для изменения внешнего вида слайдера
Двойной слайдер	Создание селектора диапазона с двумя взаимосвязанными слайдерами

Продолжайте sliding your way к успеху и удачи в программировании!

Credits: Image by storyset

Предыдущий учебник:

Bootstrap - Демо блога

Следующий учебник:

Bootstrap - Демонстрация карусели