表单组件

滑块

滑块组件，用于在指定范围内选取数值。支持单滑块和双滑块范围选择，基于 Base UI Slider 构建。

安装

bash

npx polyui add slider

默认

pages.slider.defaultDescription

tsx

import { Slider } from "@polyui/react/slider"
export function SliderDefault() {
  return (
    <div className="flex flex-col gap-6 w-full max-w-sm">
      <div className="space-y-2">
        <Slider defaultValue={[40]} />
      </div>
    </div>
  )
}

范围选择

pages.slider.rangeDescription

tsx

import { Slider } from "@polyui/react/slider"
export function SliderRange() {
  return (
    <div className="flex flex-col gap-6 w-full max-w-sm">
      <div className="space-y-2">
        <Slider defaultValue={[20, 70]} />
      </div>
    </div>
  )
}

禁用

pages.slider.disabledDescription

tsx

import { Slider } from "@polyui/react/slider"
export function SliderDisabled() {
  return (
    <div className="flex flex-col gap-6 w-full max-w-sm">
      <div className="space-y-2">
        <Slider defaultValue={[60]} disabled />
      </div>
    </div>
  )
}

Props

属性	类型	默认值	说明
`defaultValue`	`number[]`	`[min, max]`	非受控模式下的初始值，数组长度决定滑块数量
`value`	`number[]`	`—`	受控模式下的当前值
`onValueChange`	`(value: number[]) => void`	`—`	值变化时的回调
`min`	`number`	`0`	最小值
`max`	`number`	`100`	最大值
`step`	`number`	`1`	步长
`disabled`	`boolean`	`false`	是否禁用滑块
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	滑块方向
`className`	`string`	`—`	自定义样式类名