Form

Slider

A slider for selecting a numeric value within a range. Supports single thumb and dual-thumb range selection, built on Base UI Slider.

Installation

bash

npx polyui add slider

Default

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>
  )
}

Range

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>
  )
}

Disabled

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]`	Initial value in uncontrolled mode; array length determines the number of thumbs
`value`	`number[]`	`—`	The controlled current value
`onValueChange`	`(value: number[]) => void`	`—`	Callback when the value changes
`min`	`number`	`0`	Minimum value
`max`	`number`	`100`	Maximum value
`step`	`number`	`1`	Step increment
`disabled`	`boolean`	`false`	Whether the slider is disabled
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	Orientation of the slider
`className`	`string`	`—`	Additional CSS class names