Range 滑块

使用交互式滑块选择数值。

导入

import { Range } from 'asterui'

示例

基础滑块

具有默认设置的简单范围滑块。

import { Range } from 'asterui'

function App() {
  return (
      <Range />
    )
}

export default App

显示值

显示当前值的范围滑块。

import { Range } from 'asterui'

function App() {
  return (
      <Range showValue />
    )
}

export default App

显示步骤

带有可见步骤标记的范围滑块。

|||||||||||

import { Range } from 'asterui'

function App() {
  return (
      <Range showSteps step={10} />
    )
}

export default App

受控

带有状态管理的受控范围滑块。

Value: 50

import { Range } from 'asterui'
import { useState } from 'react'

function App() {
  const [value, setValue] = useState(50);
  
  return (
      <div>
        <Range value={value} onChange={setValue} showValue />
        <p className="mt-2 text-sm text-base-content/70">Value: {value}</p>
      </div>
    )
}

export default App

自定义范围

具有自定义最小值、最大值和步长值的范围滑块。

import { Range } from 'asterui'

function App() {
  return (
      <Range min={0} max={10} step={0.5} defaultValue={5} showValue />
    )
}

export default App

颜色

各种主题颜色的范围滑块。

import { Range, Space } from 'asterui'

function App() {
  return (
      <Space>
        <Range color="primary" defaultValue={25} />
        <Range color="secondary" defaultValue={35} />
        <Range color="accent" defaultValue={45} />
        <Range color="success" defaultValue={55} />
        <Range color="warning" defaultValue={65} />
        <Range color="info" defaultValue={75} />
        <Range color="error" defaultValue={85} />
      </Space>
    )
}

export default App

尺寸

各种尺寸的范围滑块。

import { Range, Space } from 'asterui'

function App() {
  return (
      <Space size="lg">
        <Range size="xs" defaultValue={25} />
        <Range size="sm" defaultValue={50} />
        <Range size="md" defaultValue={75} />
        <Range size="lg" defaultValue={90} />
      </Space>
    )
}

export default App

禁用

禁用的范围滑块。

import { Range } from 'asterui'

function App() {
  return (
      <Range disabled defaultValue={60} />
    )
}

export default App

音量控制示例

音量控制的真实示例。

🔊

50%

import { Range } from 'asterui'
import { useState } from 'react'

function App() {
  const [volume, setVolume] = useState(50);
  
  return (
      <div className="p-4 border border-base-300 rounded-lg">
        <div className="flex items-center gap-3">
          <span className="text-2xl">
            {volume === 0 ? '🔇' : volume < 50 ? '🔉' : '🔊'}
          </span>
          <Range
            value={volume}
            onChange={setVolume}
            color="primary"
            className="flex-1"
          />
          <span className="text-sm font-medium w-12 text-right">{volume}%</span>
        </div>
      </div>
    )
}

export default App

在表单中

与 Form 组件集成的范围滑块。

import { Range, Form, Button } from 'asterui'

function App() {
  const handleSubmit = (values: Record<string, unknown>) => {
    console.log('Form values:', values);
    alert(JSON.stringify(values, null, 2));
  };
  
  return (
      <Form onFinish={handleSubmit} initialValues={{ volume: 50, brightness: 75 }}>
        <Form.Item name="volume" label="Volume">
          <Range showValue color="primary" />
        </Form.Item>
  
        <Form.Item name="brightness" label="Brightness">
          <Range showValue color="warning" />
        </Form.Item>
  
        <Form.Item>
          <Button htmlType="submit" color="primary">
            Submit
          </Button>
        </Form.Item>
      </Form>
    )
}

export default App

API

`Range`

属性	描述	类型	默认值
`value`	受控值	`number`	-
`defaultValue`	默认值(非受控)	`number`	`50`
`onChange`	值更改时的回调	`(value: number) => void`	-
`min`	最小值	`number`	`0`
`max`	最大值	`number`	`100`
`step`	步长增量	`number`	`1`
`size`	范围大小	`'xs' \| 'sm' \| 'md' \| 'lg'`	`'md'`
`color`	范围颜色主题	`'primary' \| 'secondary' \| 'accent' \| 'success' \| 'warning' \| 'info' \| 'error'`	-
`disabled`	禁用范围输入	`boolean`	`false`
`showValue`	在范围下方显示当前值	`boolean`	`false`
`showSteps`	在范围下方显示步骤标记	`boolean`	`false`
`className`	额外的 CSS 类	`string`	-
`data-testid`	用于测试的测试 ID	`string`	-

可访问性

使用原生 <input type="range"> 以获得完全的可访问性
值以百分比形式由屏幕阅读器宣布
支持使用箭头键进行键盘导航
使用 showValue 进行可视值显示