# 滑动输入条 Slider

- 页面: https://jiguang132.com/zh/resources/ant-design-mobile/docs/slider
- 资源: Ant Design Mobile (https://jiguang132.com/zh/resources/ant-design-mobile.md)
- 全部指南: https://jiguang132.com/zh/resources/ant-design-mobile/docs.md

滑动型输入器，展示当前值和可选范围。

## 安装

```bash
npm install antd-mobile@5.43.0
```

antd-mobile 是移动网页组件库，不是 React Native 或小程序组件。React 19 项目需在入口用 `unstableSetRender` 注册 `createRoot`，否则 Toast、Dialog 等命令式 API 无法渲染；深色模式通过 `<html data-prefers-color-scheme="dark">` 切换。

示例来自 Ant Design Mobile 官方仓库（MIT），固定在 npm 5.43.0 对应的提交；示例中的 `DemoBlock` 等展示辅助组件由 JGuang 重写，不属于 antd-mobile 的 API。

滑动型输入器，展示当前值和可选范围。

## 何时使用

当用户需要在数值区间/自定义区间内进行选择时，可为连续或离散值。

## 示例

## Slider

### 属性

| 属性 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| defaultValue | 默认值 | `number \| [number, number]` | `range ? [0, 0] : 0` |
| disabled | 是否禁用 | `boolean` | `false` |
| icon | 滑块的图标 | `ReactNode` | - |
| marks | 刻度标记 | `{ [key: number]: React.ReactNode }` | - |
| max | 最大值 | `number` | `100` |
| min | 最小值 | `number` | `0` |
| onAfterChange | 与 `touchend` 触发时机一致，把当前值作为参数传入 | `(value: number \| [number, number]) => void` | - |
| onChange | 拖拽滑块时触发，并把当前拖拽的值作为参数传入 | `(value: number \| [number, number]) => void` | - |
| popover | 是否在拖动时显示悬浮提示，支持传入函数自定义渲染内容 | `boolean \| ((value: number) => ReactNode)` | `false` |
| residentPopover | `popover` 是否常驻显示，`popover` 存在时生效 | `boolean ` | `false` |
| range | 是否为双滑块 | `boolean` | `false` |
| step | 步距，取值必须大于 `0`，并且 `(max - min)` 可被 `step` 整除。当 `marks` 不为空对象时，`step` 的配置失效 | `number` | `1` |
| ticks | 是否显示刻度 | `boolean` | `false` |
| value | 当前值 | `number \| [number, number]` | - |

### CSS 变量

| 属性         | 说明     | 默认值                     |
| ------------ | -------- | -------------------------- |
| --fill-color | 填充颜色 | `var(--adm-color-primary)` |

---

JGuang 全部资源索引: https://jiguang132.com/llms.txt