Bootstrap - Slider Demo: Hướng dẫn chi tiết cho người mới bắt đầu

Xin chào các bạn đang học lập trình web! Hôm nay, chúng ta sẽ bắt đầu một hành trình thú vị vào thế giới của các slider Bootstrap. Là giáo viên máy tính hàng xóm thân thiện của bạn, tôi sẽ dẫn đường cho bạn từng bước một. Vậy, hãy lấy饮料 yêu thích của bạn, ngồi thoải mái, và cùng nhau bắt đầu nhé!

Bootstrap - Slider Demo

Slider Bootstrap là gì?

Trước khi bắt đầu lập mã, hãy cùng nhau hiểu xem chúng ta đang làm việc với thứ gì. Slider Bootstrap là một thành phần giao diện người dùng cho phép người dùng chọn một giá trị từ một khoảng bằng cách kéo một cần gạt dọc theo một thanh. Nó giống như phiên bản kỹ thuật số của những cần điều chỉnh âm lượng bạn thấy trên các máy radio cũ - rất thú vị phải không?

Tại sao nên sử dụng Bootstrap Sliders?

Sliders rất tuyệt vời cho:

Chọn các giá trị số trong một khoảng
Điều chỉnh các thiết lập như âm lượng hoặc độ sáng
Lọc dữ liệu dựa trên một khoảng (hãy nghĩ đến khoảng giá trên các trang mua sắm)

Bây giờ chúng ta đã biết chúng là gì và tại sao chúng lại hữu ích, hãy cùng nhau vào sâu hơn với một chút mã!

Thiết lập môi trường Bootstrap

Trước hết, chúng ta cần thiết lập môi trường Bootstrap của mình. Đừng lo lắng; nó dễ dàng hơn việc thiết lập một chiếc điện thoại mới!

Bước 1: bao gồm Bootstrap CSS và JS

Thêm các dòng sau vào phần <head> của file HTML của bạn:

<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>

Những dòng này giống như mời Bootstrap đến tiệc lập mã của bạn. Chúng mang theo tất cả các phong cách và chức năng tuyệt vời mà chúng ta sẽ cần.

Tạo slider Bootstrap đầu tiên

Bây giờ, hãy tạo một slider cơ bản. Nó dễ dàng như làm bánh mì - mặc dù có thể稍微 phức tạp hơn một chút, nhưng bạn sẽ nhanh chóng làm quen!

Bước 2: Cấu trúc HTML

Thêm mã này vào phần thân HTML của bạn:

<div class="container mt-5">
<h2>Slider Bootstrap đầu tiên của tôi</h2>
<input type="range" class="form-range" min="0" max="100" step="1" id="customRange">
<p>Giá trị: <span id="rangeValue"></span></p>
</div>

Giải thích:

<div class="container mt-5">: Tạo một container với một chút margin trên.
<input type="range">: Đây là input slider của chúng ta.
class="form-range": Lớp Bootstrap này định dạng input của chúng ta thành một slider.
min="0" max="100" step="1": Đặt giá trị tối thiểu, tối đa và bước.
<p>Giá trị: <span id="rangeValue"></span></p>: Đây sẽ hiển thị giá trị đã chọn.

Bước 3: Phép thuật JavaScript

Bây giờ, hãy thêm một chút JavaScript để làm slider của chúng ta tương tác:

<script>
const slider = document.getElementById('customRange');
const output = document.getElementById('rangeValue');
output.innerHTML = slider.value; // Hiển thị giá trị mặc định của slider

// Cập nhật giá trị hiện tại của slider (mỗi khi bạn kéo cần gạt slider)
slider.oninput = function() {
output.innerHTML = this.value;
}
</script>

Chương trình này thực hiện hai điều:

Hiển thị giá trị mặc định của slider.
Cập nhật giá trị hiển thị mỗi khi bạn di chuyển cần gạt.

Tùy chỉnh slider

Bây giờ chúng ta đã có một slider cơ bản, hãy làm cho nó trở nên thú vị hơn một chút. Đến lúc戴上 nhà thiết kế của chúng ta!

Bước 4: Thêm một chút phong cách

Hãy thêm một chút CSS tùy chỉnh để làm slider của chúng ta nổi bật:

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

Thêm này vào phần <head> của file HTML của bạn. Nó thay đổi chiều rộng của slider và màu sắc của cần gạt thành xanh lam.

Bước 5: Tạo một slider hai đầu

Bây giờ, hãy tạo một thứ gì đó phức tạp hơn - một slider hai đầu để chọn một khoảng giá:

<div class="container mt-5">
<h2>Chọn khoảng giá</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>Giá tối thiểu: $<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>Giá tối đa: $<span id="maxValue"></span></p>
</div>
</div>
</div>

Và đoạn mã JavaScript tương ứng:

<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>

Điều này tạo ra hai slider làm việc cùng nhau để chọn một khoảng giá. Chương trình đảm bảo rằng giá tối thiểu không bao giờ vượt quá giá tối đa và ngược lại.

Kết luận

Chúc mừng! Bạn vừa tạo ra những slider Bootstrap đầu tiên của mình. Từ một slider đơn giản đến một bộ chọn khoảng giá phức tạp hơn, bạn đã đi qua rất nhiều nội dung. Nhớ rằng, thực hành làm nên hoàn hảo, vì vậy đừng ngần ngại thử nghiệm với các phong cách và chức năng khác nhau.

Dưới đây là tóm tắt nhanh những gì chúng ta đã học:

Khái niệm	Mô tả
Thiết lập Bootstrap	Bao gồm Bootstrap CSS và JS trong HTML
Slider cơ bản	Tạo một input loại range được định dạng với Bootstrap
Tương tác JavaScript	Sử dụng JavaScript để hiển thị và cập nhật giá trị slider
Tùy chỉnh phong cách	Áp dụng CSS tùy chỉnh để thay đổi ngoại hình của slider
Slider hai đầu	Tạo một bộ chọn khoảng giá với hai slider liên kết

Tiếp tục slide đến thành công, và chúc bạn lập mã vui vẻ!

Credits: Image by storyset

Hướng Dẫn Trước:

Bootstrap - Demo Blog

Hướng Dẫn Tiếp Theo:

Bootstrap - Demo Carousel