Range Slider 范围选择

Range 仍然坚持原生input type="range" 的语义，但不再只是一条裸滑杆。现在可以直接在组件层补充标题、提示、刻度、值展示和语义回调，设计页也按能力分层重新组织。

# Range

展示最小写法；如果你只想要一个原生滑杆，API 仍然保持直接。

当前值：40

# 带文案与实时值

把 label、hint、helper、showValue 和 marks 叠到组件自身，适合做套餐档位和配置面板。

边缘带宽

滑动查看不同档位的交付能力。

250 Mbps

LiteStartGrowthScaleMax

超过 500 Mbps 后，建议同步升级防护策略与监控采样。

每秒请求

450k

区域副本

3 个

推荐套餐

Growth

# With steps and measure

基础示例保持，但把刻度线和标签收进 marks，减少样板代码。

25%

12345

# Range colors

使用颜色矩阵，同时展示语义 API 与颜色类可以自然叠加。

neutral

primary

secondary

accent

success

warning

info

error

# Sizes

展示 xs 到 xl 的基础尺寸，同时补上 small / medium / large 三个别名，方便和其他组件对齐。

small

medium

large

# 受控提交

拖动中用 onValueChange 更新即时反馈，松手后用 onValueCommit 记录确认值。

团队席位

拖动时实时更新预算，松手后再提交确认值。

12 seats

515304560

实时预算

¥ 1548 / 月

已确认席位

12 seats

# Range with custom color and no fill

基础的自定义 CSS 变量方案继续可用；语义 API 不会挡住底层变量覆写。

mix 40

# API

不做增强展示时，Range 仍然是一个直接透传原生属性的滑杆；一旦传入label、showValue、marks等属性，就会自动切换到更完整的展示结构。

属性	说明	类型	默认值
`className`	追加到原生 input 的类名，适合继续覆写 CSS 变量	`string`	`-`
`color`	语义色，映射到 range-* 颜色类	`'neutral' \| 'primary' \| 'secondary' \| 'accent' \| 'success' \| 'warning' \| 'info' \| 'error'`	`-`
`defaultValue`	非受控初始值	`string \| number`	`-`
`formatter`	值格式化函数，可与 showValue 组合使用	`(value: number, info: { min: number; max: number; percent: number }) => any`	`-`
`helper`	底部辅助文案	`any`	`-`
`hint`	标题下方的简短说明	`any`	`-`
`label`	顶部标题，自动关联 input id	`any`	`-`
`marks`	刻度点，可传 number / string 或 { value, label } 数组	`Array<string \| number \| { value: string \| number; label?: any }>`	`-`
`max`	最大值	`string \| number`	`100`
`min`	最小值	`string \| number`	`0`
`onValueChange`	拖动过程中的语义回调，返回解析后的 number	`(value: number, event: Event) => void`	`-`
`onValueCommit`	原生 change 阶段的语义回调，适合提交确认值	`(value: number, event: Event) => void`	`-`
`rootClassName`	增强结构外层容器类名，仅在展示层激活时生效	`string`	`-`
`showValue`	显示当前值，可配置 formatter、placement 和 className	`boolean \| { formatter?: (value: number, info: { min: number; max: number; percent: number }) => any; placement?: 'inline' \| 'below'; className?: string }`	`false`
`size`	尺寸，支持 xs-xl 以及 small / medium / large 别名	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'small' \| 'medium' \| 'large'`	`'md'`
`step`	步长	`string \| number`	`1`
`value`	受控值	`string \| number`	`-`