npm package: @libs-ui/components-inputs-range-slider
Description: `@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).
Latest version: 0.2.356-23

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

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

## Cách sử dụng

### Import Module

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

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

### Ví dụ cơ bản

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

### Chế độ âm thanh (Audio Mode)

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