FormRange

基础表单

基于 Bootstrap 5 的范围滑动条组件，为原生 range 输入框提供统一外观，支持最小/最大值、步进间隔、禁用状态及有效/无效校验状态

Basic usage and examples of the FormRange component

基础用法

禁用的滑动条呈灰色外观且不可交互

通过 min / max 属性限制取值范围，默认范围为 0 到 100

默认情况下滑动条按整数值「吸附」移动，通过 step 属性调整步进间隔，如 0.5 或 any（任意值）

看起来不错！

请选择一个值。

通过 isValid / isInvalid 属性应用 is-valid / is-invalid 校验样式，配合 FormFeedback 提供有效/无效反馈文本

当前值：50

Complete API reference for the FormRange component

属性名	类型	默认值	描述
`className`	`string`	-	自定义类名
`defaultValue`	`number`	`50`	原生 `defaultValue` 属性，非受控的默认值；未设置时浏览器取 `min` 与 `max` 的中间值
`disabled`	`boolean`	-	是否禁用滑动条，禁用的控件不可聚焦且不参与表单提交
`id`	`string`	-	原生 `id` 属性，用于与 `label` 的 `htmlFor` 关联
`isInvalid`	`boolean`	`false`	是否应用无效状态样式（`is-invalid`），通常配合校验反馈使用
`isValid`	`boolean`	`false`	是否应用有效状态样式（`is-valid`）
`max`	`number`	`100`	允许的最大值，不能小于 `min`
`min`	`number`	`0`	允许的最小值，不能大于 `max`
`name`	`string`	-	原生 `name` 属性，控件值随表单一起提交
`step`	`number \| 'any'`	`1`	步进间隔，控制每次移动滑块的增量；设为 `any` 时允许任意小数增量
`value`	`number`	-	受控的当前值
`...rest`	`InputHTMLAttributes<HTMLInputElement>`	-	根元素的所有原生属性（如 `onChange`、`onInput`、`aria-*` 等）

范围滑动条组件属性接口

export interface FormRangeProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
  isInvalid?: boolean;
  isValid?: boolean;
}