Range Slider Component

@libs-ui/components-inputs-range-slider là một component cho phép người dùng chọn một giá trị từ một dải giá trị cho trước (range) bằng cách kéo thanh trượt. Component hỗ trợ nhiều chế độ hiển thị, nhãn giá trị động và tùy chỉnh bước nhảy (step).

Tính năng nổi bật

• 🎚️ Hai chế độ hiển thị: Chế độ slider phổ thông và chế độ audio tối giản.
• 🏷️ Nhãn giá trị động: Tự động hiển thị giá trị hiện tại theo vị trí con trỏ chuột.
• 👁️ Thông minh: Tự động ẩn nhãn Min/Max khi nhãn giá trị hiện tại bị chồng lấp để đảm bảo tính thẩm mỹ.
• 🔢 Định dạng số: Hỗ trợ định dạng số theo ngôn ngữ thông qua thuộc tính formatNumber.
• 🛠️ Tùy biến cao: Cho phép cấu hình min, max, step và đơn vị đo (unit).
• 🎨 Hiệu ứng mượt mà: Sử dụng CSS variables để xử lý tiến độ (progress) và các hiệu ứng hover/focus.

Cài đặt

Sử dụng npm hoặc yarn để cài đặt:

npm install @libs-ui/components-inputs-range-slider

Cách sử dụng

Import Module

import { LibsUiComponentsInputsRangeSliderComponent } from '@libs-ui/components-inputs-range-slider';

@Component({
  standalone: true,
  imports: [LibsUiComponentsInputsRangeSliderComponent],
  // ...
})
export class YourComponent {}

Ví dụ cơ bản

<libs_ui-components-inputs-range_slider
  [(value)]="volume"
  [min]="0"
  [max]="100"
  [unit]="'%'"></libs_ui-components-inputs-range_slider>

Chế độ âm thanh (Audio Mode)

<libs_ui-components-inputs-range_slider
  [(value)]="audioValue"
  [mode]="'audio'"
  [min]="0"
  [max]="10"
  [step]="0.5"></libs_ui-components-inputs-range_slider>

API Reference

Inputs

| Thuộc tính | Kiểu dữ liệu | Mặc định | Mô tả | | :--------------------- | :-------------------- | :-------------- | :----------------------------------------------- | | value | number | (Model) 0 | Giá trị hiện tại của thanh trượt. | | mode | 'audio' \| 'slider' | 'slider' | Chế độ hiển thị của slider. | | min | number | 1 | Giá trị tối thiểu. | | max | number | 100 | Giá trị tối đa. | | step | number | 0 | Bước nhảy mỗi khi kéo (0 là kéo mượt). | | unit | string | undefined | Đơn vị hiển thị sau giá trị (vd: %, px, $). | | disable | boolean | false | Vô hiệu hóa tương tác. | | formatNumber | boolean | false | Nếu true, định dạng số theo ngữ cảnh ngôn ngữ. | | hideProgressingValue | boolean | false | Ẩn nhãn giá trị động phía trên thanh trượt. | | classInclude | string | undefined | Class CSS bổ sung cho container. |

Outputs

| Sự kiện | Kiểu dữ liệu | Mô tả | | :---------- | :----------- | :----------------------------------------------------------------------- | | outChange | number | Phát ra giá trị mới sau khi người dùng dừng kéo (có debounceTime 250ms). |

Tech Stack

• Core: Angular 18+ (Signals & model)
• Styling: Vanilla SCSS
• Utils: @libs-ui/utils

License

MIT