VNR Design System

Slider

A slider component for selecting a value from a range.

Khi nào sử dụng

Lọc khoảng giá

Lọc sản phẩm theo phạm vi giá tối thiểu — tối đa.

Điều chỉnh cài đặt

Thay đổi âm lượng, độ sáng hoặc kích thước font.

Budget Allocation

Distribute percentages across categories visually.

Hướng dẫn

Do
  • Hiện giá trị hiện tại bằng tooltip hoặc label
  • Đặt marks tại các điểm quan trọng
Don't
  • Dùng Slider cho giá trị cần chính xác tuyệt đối
  • Đặt phạm vi quá rộng khiến khó chọn chính xác

Basic

Range

Vertical

Marks

0°C26°C37°C100°C

Disabled