滑动输入条 Slider

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

安装

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