Slider
Swipe input showing current value and selectable range.
Install
npm install antd-mobile@5.43.0
antd-mobile is for mobile web, not React Native or Mini Programs. React 19 projects must register createRoot with unstableSetRender at the entry, or imperative APIs such as Toast and Dialog cannot render. Switch dark mode with <html data-prefers-color-scheme="dark">.
Examples come from the official Ant Design Mobile repository (MIT) at the commit published as npm 5.43.0. Presentation helpers such as DemoBlock are JGuang rewrites, not antd-mobile APIs.
Swipe input showing current value and selectable range.
When to Use
When the user needs to select within the numerical interval/custom interval, it can be a continuous or discrete value.
Demos
Slider
Props
| Name | Description | Type | Default |
|---|---|---|---|
| defaultValue | Default value | number | [number, number] | range ? [0, 0] : 0 |
| disabled | Whether disabled | boolean | false |
| icon | The icon of slider | ReactNode | - |
| marks | Tick marks | { [key: number]: React.ReactNode } | - |
| max | Max value | number | 100 |
| min | Min value | number | 0 |
| onAfterChange | Consistent with the trigger timing of touchend, pass the current value as a parameter | (value: number | [number, number]) => void | - |
| onChange | Triggered when the slider is dragged, and the current dragged value is passed in as a parameter | (value: number | [number, number]) => void | - |
| popover | Whether to display the popover when dragging. Support passing in function to customize the rendering content. | boolean | ((value: number) => ReactNode) | false |
| residentPopover | Whether the popover is permanently displayed , this attribute takes effect when popover exists | boolean | false |
| range | Whether it is a double sliders | boolean | false |
| step | Step distance, the value must be greater than 0, and (max-min) can be divisible by step. When marks is not null, the configuration of step is invalid | number | 1 |
| ticks | Whether to display the scale | boolean | false |
| value | Current value | number | [number, number] | - |
CSS Variables
| Name | Description | Default |
|---|---|---|
| --fill-color | filled color | var(--adm-color-primary) |