Range Slider
Range Slider là component giúp tạo một hanh trượt để hiển thị giá trị hiện tại và các khoảng trong phạm vi.
Range Slider Properties
| Prop | Type | Default | Description |
|---|---|---|---|
| init | boolean | true | Khởi tạo Range Slider hay không |
| value | number |array | string | Giá trị của Range Slider, trường hợp là dual range slider giá trị là array | |
| min | number | string | Giá trị nhỏ nhất | |
| max | number | string | Giá trị lớn nhất | |
| step | number | string | 1 | Bước nhảy khi range thay đổi |
| label | boolean | false | Bật label hiển thị khi kéo nút điều chỉnh (knob) |
| dual | boolean | false | Bật dual range slider |
| vertical | boolean | false | Bật range slider dạng dọc |
| verticalReversed | boolean | false | Đổi chiều range slider dạng dọc. (Sử dụng khi đã set vertical:true) |
| draggableBar | boolean | true | Cho phép người dùng click/ press lên range slider để thay đổi giá trị |
| formatLabel | function(value) | Method trả về label đã được dịnh dạng. Đối số nhận vào giá trị label | |
| scale | boolean | false | Bật thước tỉ lệ trên range slider |
| scaleSteps | number | 5 | Số lượng khoảng đo trên thước tỉ lê |
| scaleSubSteps | number | 0 | Số lượng vạch đo phụ trên mỗi khoảng đo |
| formatScaleLabel | function (value) | Method trả về label hiển thị giá trị của khoảng đo đã được format. Đối số nhận vào giá trị của khoảng đo. | |
| limitKnobPosition | boolean | Giới hạn vị trí nút điều chỉnh theo kích thước của range bar. Măc định được bật trên iOS theme | |
| disabled | boolean | false | Vô hiệu hóa range slider |
| id | string | Range slider element ID | |
| input | boolean | false | Nếu bật, sẽ render input type="range" element phía trong |
| inputId | string | Giá trị thuộc tính ID của input element | |
| name | string | Giá trị thuộc tính "name" của input element |
Range Slider Events
| Event | Prop | Description |
|---|---|---|
| rangeChange | onRangeChange | Event sẽ được triggered trong quá trình range thay đổi |
| rangeChanged | onRangeChanged | Event sẽ được triggered khi người dùng thả nút điều chỉnh |
Ví dụ
Code demo fallback when rendering server side!