zent
Version:
一套前端设计语言和基于React的实现
47 lines (36 loc) • 2.69 kB
Markdown
---
title: Slider
path: component/slider
group: Data Entry
scatter: true
---
## Slider
You can select a value by dragging or clicking `Slider`.
### Guides
- Support a single slider and double slider.
- Can be used with `Input`.
-
<!-- demo-slot-1 -->
<!-- demo-slot-3 -->
<!-- demo-slot-6 -->
<!-- demo-slot-7 -->
### API
| Property | Description | Type | Default | Alternative | Required |
| --------- | ------------------------------------------------------------------------- | ---------------- | ------- | ----------- | -------- |
| value | The value of input | [number,array] | 0 | [0,0] | yes |
| onChange | The callback function that is triggered when the slider is changed | func(e:Event) | | | no |
| range | Whether the range selection can be used or not | bool | false | | no |
| max | The max value | number | 100 | 50 | no |
| min | The min value | number | 0 | -100 | no |
| step | The interval between values | number | 1 | | no |
| withInput | Whether the input is included | bool | `true` | `false` | no |
| dots | Whether the value of slider can only be selected from label values or not | bool | false | | no |
| marks | label values | object | | | no |
| disabled | Disable the silder | bool | `false` | | no |
| className | The custom classname | string | `''` | | no |
| width | width | string or number | | | no 否 |
**Ps.** When setting `range`, you should set `value` as an array of length 2. The array entry must be a number. Property `dots` must be used with `marks`.
#### The following functions is obsolete in the new design system and is only used as a reference for the old version
<!-- demo-slot-2 -->
<!-- demo-slot-4 -->
<!-- demo-slot-5 -->