特性

• 通过一个共享组件支持单值和范围滑块。
• 提供标记、点、键盘交互、反向和垂直布局。
• 通过 range 配置支持可编辑范围手柄和可拖动轨道。
• 引入用于轨道、导轨和手柄的语义 classNames 和 styles 插槽。

安装

npm install @rc-component/slider

使用

import Slider from '@rc-component/slider';
import '@rc-component/slider/assets/index.css';

export default () => <Slider defaultValue={30} />;

import Slider from '@rc-component/slider';
import '@rc-component/slider/assets/index.css';

export default () => (
  <Slider
    range={{ draggableTrack: true }}
    marks={{ 0: '0', 50: '50', 100: '100' }}
    defaultValue={[20, 60]}
  />
);

在线预览：https://slider.react-component.vercel.app/

示例

运行本地 dumi 站点：

npm install
npm start

然后打开 http://localhost:8000。

API

Slider

| 名称 | 类型 | 默认值 | 说明 | | --- | --- | --- | --- | | activeDotStyle | React.CSSProperties | (dotValue: number) => React.CSSProperties | - | 激活点的样式。 | | activeHandleRender | HandlesProps['handleRender'] | - | 活动句柄的渲染函数。 | | allowCross | boolean | true | 允许手柄在范围模式下交叉。 | | ariaLabelForHandle | string | string[] | - | aria-label for handle elements. | | ariaLabelledByForHandle | string | string[] | - | aria-labelledby for handle elements. | | ariaDescribedByForHandle | string | string[] | - | 句柄元素的 aria-describedby。 | | ariaRequired | boolean | - | 句柄元素的 aria-required。 | | ariaValueTextFormatterForHandle | ((value: number) => string) \| ((value: number) => string)[] | - | aria-valuetext 格式化函数。 | | autoFocus | boolean | - | 挂载后自动聚焦滑块。 | | className | string | - | 附加 className。 | | classNames | Partial<Record<'tracks' \| 'track' \| 'rail' \| 'handle', string>> | - | 内部插槽的语义化 className。 | | count | number | - | 已废弃。请使用 range.minCount 或 range.maxCount。 | | defaultValue | number | number[] | - | 初始值。 | | disabled | boolean | boolean[] | false | 禁用全部滑块或指定滑块。 | | dots | boolean | false | 在每个有效步骤位置显示点。 | | dotStyle | React.CSSProperties | (dotValue: number) => React.CSSProperties | - | 点的样式。 | | handleRender | HandlesProps['handleRender'] | - | 自定义句柄渲染器。 | | handleStyle | React.CSSProperties | React.CSSProperties[] | - | 已废弃。请使用 styles.handle。 | | id | string | - | 根 ID。 | | included | boolean | true | 轨道是否渲染为连续的选定间隔。 | | keyboard | boolean | true | 启用键盘交互。 | | marks | Record<string \| number, ReactNode \| MarkObj> | - | 滑块刻度标记。 | | max | number | 100 | 最大值。 | | min | number | 0 | 最小值。 | | onAfterChange | (value) => void | - | 已废弃。请使用 onChangeComplete。 | | onBeforeChange | (value) => void | - | 已废弃。请使用 onChange。 | | onBlur | (event) => void | - | 模糊处理程序。 | | onChange | (value) => void | - | 当值改变时触发。 | | onChangeComplete | (value) => void | - | 交互完成时触发。 | | onFocus | (event) => void | - | 焦点处理程序。 | | prefixCls | string | 'rc-slider' | className 前缀。 | | pushable | boolean | number | false | 范围模式下推动相邻滑块。 | | railStyle | React.CSSProperties | - | 已废弃。请使用 styles.rail。 | | range | boolean | RangeConfig | false | 启用范围模式或配置可编辑范围行为。 | | reverse | boolean | false | 以相反方向渲染。 | | startPoint | number | min | 单值轨迹的起点。 | | step | number | null | 1 | 步长。使用 null 时以标记作为步进。 | | style | React.CSSProperties | - | 根样式。 | | styles | Partial<Record<'tracks' \| 'track' \| 'rail' \| 'handle', React.CSSProperties>> | - | 内部插槽的语义化样式。 | | tabIndex | number | number[] | 0 | 滑块的 tabIndex。 | | track | boolean | - | 是否渲染轨道元素。 | | trackStyle | React.CSSProperties | React.CSSProperties[] | - | 已废弃。请使用 styles.track。 | | value | number | number[] | - | 受控值。 | | vertical | boolean | false | 垂直渲染。 |

RangeConfig

| 名称 | 类型 | 默认值 | 说明 | | ---------------- | ------- | ------ | ------------------------ | | draggableTrack | boolean | false | 允许拖动选定的范围轨道。 | | editable | boolean | false | 允许添加或删除范围手柄。 | | maxCount | number | - | 可编辑时的最大句柄数。 | | minCount | number | - | 可编辑时的最小句柄数。 |

Ref

| 名称 | 类型 | 说明 | | ------- | ------------ | ---------- | | blur | () => void | 模糊滑块。 | | focus | () => void | 聚焦滑块。 |

本地开发

npm install
npm start
npm test
npm run tsc
npm run compile
npm run build

dumi 站点默认运行在 http://localhost:8000。

发布

npm run prepublishOnly

包构建完成后，发布流程由 @rc-component/np 通过 rc-np 命令处理。

许可证

@rc-component/slider 基于 MIT 许可证发布。