# Slider

- Page: https://jiguang132.com/resources/ant-design-mobile/docs/slider
- Resource: Ant Design Mobile (https://jiguang132.com/resources/ant-design-mobile.md)
- All guides: https://jiguang132.com/resources/ant-design-mobile/docs.md

Swipe input showing current value and selectable range.

## Install

```bash
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)` |

---

Index of all JGuang resources: https://jiguang132.com/llms.txt