← Quay lại mục lục

Bài 19 — Range Slider lọc giá

Slider 2 thumb cho khoảng giá min-max + đếm sản phẩm. Test 2-thumb constraint, step alignment.

Trung bình #slider #range #boundary #step #2-thumb

🎚️ Bài 19: Range Slider — Lọc theo khoảng giá

Slider 2 thumb để chọn khoảng giá min-max + đếm số sản phẩm match. Bài tập về boundary + 2-thumb interaction.

📋 Bảng đặc tả

#	Thuộc tính	Giá trị
1	Min absolute	0 VND
2	Max absolute	10,000,000 VND (10 tr)
3	Step	100,000 VND
4	Default	min = 0, max = 10,000,000
5	Constraint	min < max (luôn cách nhau ≥ 1 step)
6	Display	Format VND có dấu phẩy

🎯 Quy tắc tương tác

Kéo Min thumb không được vượt quá Max thumb (luôn cách ≥ 1 step).
Kéo Max thumb không được lùi xuống dưới Min thumb.
Cả 2 input number cũng có cùng ràng buộc.
Step = 100,000 → tất cả giá trị phải là bội của 100,000.
Real-time đếm số sản phẩm trong khoảng đã chọn.
Reset button để về mặc định.

📌 Sample products

20 sản phẩm với giá phân tán: 50k → 9.5tr

🎯 Yêu cầu

Test 2-thumb constraint: kéo min vượt qua max → có chặn không?
Test step alignment: nhập input 123,456 → có snap về bội của step không?
Test boundary: min = 0, max = 10,000,000.
Test reset: về đúng default.
Test counter: lọc khoảng nhỏ (chỉ 1-2 sản phẩm) — đếm có đúng?

⚠️ Bug được cài cắm: 2-thumb constraint, step alignment, format VND, counter logic, reset behavior.

🎚️ Range Slider

Test 2-thumb constraint, step alignment (100,000), counter sản phẩm.

Filter by price range

Min0 VND

Max10,000,000 VND

Min (VND)

Max (VND)

20 products in range

Sample products In-range = highlighted · Out-of-range = dimmed

Đăng nhập để thực hành

Form thực hành chỉ dành cho học viên đã đăng nhập.

🔐

Vui lòng đăng nhập để nộp bài.

Đăng nhập

🔐

Tab dành cho giảng viên

Tab này chứa danh sách các lỗi đã cài cắm trong form. Vui lòng nhập mã giảng viên để mở khóa. Mã sẽ ghi nhớ trong phiên làm việc — chỉ cần nhập 1 lần cho cả 3 bài.