chenzy-design

如何引入

import { Slider } from '@chenzy-design/svelte';

基础用法

受控单值滑块，onChange 回调返回当前值。

当前值：40

区间选择

设置 range 启用双滑块，onChange 返回 [min, max] 数组。

区间：20 – 70

禁用与边界值

disabled 禁用交互，showBoundary 在轨道两端显示 min/max 标签。

禁用态

显示边界值

0

100

与输入框联动

Slider 与 InputNumber 双向同步，两者共享同一状态。

自定义提示

tipFormatter 自定义气泡文案，返回 null 可隐藏气泡；alwaysShowTip 常驻。

追加单位并常驻显示

隐藏气泡

刻度标签

marks 定义刻度，可用对象形式设置单个刻度样式；included=false 时刻度不随选区高亮。

带刻度的区间选择（step 10）

0°C 20°C 40°C 100°C

included=false 时刻度不随选区高亮

0°C 20°C 40°C 100°C

分段背景

railStyle 传入 linear-gradient，随选区动态更新形成分段着色。

分段：30 / 70

垂直方向

vertical 启用垂直布局，verticalReverse 翻转方向，height 控制高度。

vertical

reverse

range

手柄圆点

handleDot 为手柄叠加圆点，range 时可用数组分别配置两个手柄。

单值手柄圆点

区间两个手柄分别配置

自定义渲染

通过 mark / handle / tooltip 具名 snippet 自定义刻度、手柄与气泡内容。

自定义刻度、手柄与气泡渲染

低中高

API 参考

Slider

Props

属性	说明	类型	默认值
`value`	受控值；range 时为二元组	`number \| [number, number]`	undefined
`defaultValue`	非受控初始值	`number \| [number, number]`	min / [min,min]
`min`	—	`number`	0
`max`	—	`number`	100
`step`	null 时仅停靠 marks 键	`number \| null`	1
`range`	双滑块区间模式	`boolean`	false
`marks`	刻度标记；对象形式可带自定义 style	`Record<number, string \| { label: string; style?: string }>`	undefined
`dots`	在每个 step 处显示圆点（段内激活色）	`boolean`	false
`included`	是否填充已选轨道段	`boolean`	true
`vertical`	—	`boolean`	false
`verticalReverse`	垂直时反向（顶部为 min）	`boolean`	false
`height`	垂直模式高度（px）	`number`	200
`disabled`	—	`boolean`	false
`clickable`	是否允许点击轨道跳转到最近合法值	`boolean`	true
`size`	—	`'small'\|'default'\|'large'`	default
`status`	校验态，影响已选轨道与手柄边框色	`'default'\|'warning'\|'error'`	default
`tooltipVisible`	强制控制数值气泡显隐（受控）	`boolean \| undefined`	undefined
`alwaysShowTip`	始终显示数值气泡	`boolean`	false
`tipFormatter`	自定义气泡文案；返回 null 隐藏	`(value: number) => string \| null`	String
`getAriaValueText`	自定义 aria-valuetext（如带单位）	`(value: number, index: number) => string`	undefined
`railStyle`	透传轨道内联样式	`string`	undefined
`trackStyle`	已选轨道段自定义样式（range 时为数组，各段对应一个样式对象）	`Record<string, string> \| Record<string, string>[]`	undefined
`handleStyle`	透传手柄内联样式	`string`	undefined
`pushable`	range 模式下两手柄是否可相互推动（true=最小间距 0，number=最小间距值）	`boolean \| number`	false
`allowCross`	range 模式下是否允许交叉（false 时强制 left <= right）	`boolean`	true
`id`	根节点 id，关联表单 label	`string`	undefined
`ariaLabel`	—	`string`	undefined
`ariaLabelledby`	group 与各手柄 aria-labelledby（指向外部 label id）	`string`	undefined
`onChange`	值变化（拖拽落定/键盘/点击）	`(v: number \| [number, number]) => void`	undefined
`onChangeComplete`	拖拽结束或键盘落定时触发，适合请求节流	`(v: number \| [number, number]) => void`	undefined
`onAfterChange`	拖拽/点击结束时触发（onChangeComplete 的别名）	`(v: number \| [number, number]) => void`	undefined
`onInput`	与 change 同步的低级输入信号（拖动中实时触发）	`(v: number \| [number, number]) => void`	undefined
`onFocus`	手柄获得焦点，附带手柄索引	`(detail: { index: number }) => void`	undefined
`onBlur`	手柄失焦，附带手柄索引	`(detail: { index: number }) => void`	undefined
`showBoundary`	显示轨道两端边界值标签	`boolean`	false
`showArrow`	tooltip 是否显示箭头	`boolean`	true
`showMarkLabel`	显示标记文本标签	`boolean`	true
`tooltipOnMark`	tooltip 跟随标记位置	`boolean`	false
`handleDot`	自定义手柄圆点样式，range 时为数组	`{ color: string; size: string } \| { color: string; size: string }[]`	undefined
`onMouseUp`	pointerup 时触发	`(e: MouseEvent) => void`	undefined
`ariaValuetext`	覆盖 getAriaValueText 的 aria-valuetext 文案	`string`	undefined

Slots

名称	说明
`mark`	自定义单个刻度标签渲染
`handle`	自定义手柄内容（如带数字徽标）
`tooltip`	自定义数值气泡内部内容

Accessibility

设计变量

变量	默认值	用法
`--cd-slider-handle-transition-duration`	`var(--cd-motion-duration-fast)`	滑块手柄阴影过渡时长（组件消费）
`--cd-slider-handle-transition-easing`	`var(--cd-motion-ease-standard)`	滑块手柄阴影过渡曲线（组件消费）

ARIA role	`slider`
键盘交互	`ArrowUp/RightArrowDown/LeftPageUpPageDownHomeEnd`