Slider 滑块

通过滑动滑块来选择一个数值。

基础用法

import { Slider } from '@airo-ui/react'

function Demo() {
  return <Slider defaultValue={30} />
}

受控与非受控

import { useState } from 'react'
import { Slider } from '@airo-ui/react'

function ControlledDemo() {
  const [value, setValue] = useState(50)
  return <Slider value={value} onChange={setValue} />
}

function UncontrolledDemo() {
  return <Slider defaultValue={60} />
}

范围与步长

import { Slider } from '@airo-ui/react'

function Demo() {
  return (
    <>
      <Slider defaultValue={30} min={0} max={100} step={10} />
      <Slider defaultValue={30} min={0} max={100} step={0.1} />
    </>
  )
}

提示

import { Slider } from '@airo-ui/react'

// 显示默认提示
<Slider defaultValue={50} tooltip />

// 自定义提示格式
<Slider
  defaultValue={50}
  tooltip
  formatTooltip={(value) => `${value}%`}
/>

尺寸

import { Slider } from '@airo-ui/react'

function Demo() {
  return (
    <>
      <Slider defaultValue={50} size="sm" />
      <Slider defaultValue={50} size="md" />
    </>
  )
}

禁用

import { Slider } from '@airo-ui/react'

function Demo() {
  return <Slider defaultValue={50} disabled />
}

API

Props

名称	类型	默认值	说明
value	number	—	受控模式当前值
defaultValue	number	0	非受控模式默认值
min	number	0	最小值
max	number	100	最大值
step	number	1	步长
disabled	boolean	false	是否禁用
size	'sm' | 'md'	'md'	尺寸
tooltip	boolean	false	是否显示提示
formatTooltip	(value: number) => string | number	—	自定义提示内容格式
onChange	(value: number) => void	—	值变化时触发