Range

Select numeric values using an interactive slider.

Import

import { Range } from 'asterui'

Examples

Basic Range

Simple range slider with default settings.

import { Range } from 'asterui'

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

export default App

With Value Display

Range slider showing the current value.

import { Range } from 'asterui'

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

export default App

With Steps

Range slider with visible step markers.

|||||||||||

import { Range } from 'asterui'

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

export default App

Controlled

Controlled range slider with state management.

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

Custom Range

Range slider with custom min, max, and step values.

import { Range } from 'asterui'

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

export default App

Colors

Range sliders in various theme colors.

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

Sizes

Range sliders in various sizes.

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

Disabled

Disabled range slider.

import { Range } from 'asterui'

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

export default App

Volume Control Example

Real-world example of a volume control.

🔊

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

In Form

Range slider integrated with Form component.

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`

Property	Description	Type	Default
`value`	Controlled value	`number`	-
`defaultValue`	Default value (uncontrolled)	`number`	`50`
`onChange`	Callback when value changes	`(value: number) => void`	-
`min`	Minimum value	`number`	`0`
`max`	Maximum value	`number`	`100`
`step`	Step increment	`number`	`1`
`size`	Range size	`'xs' \| 'sm' \| 'md' \| 'lg'`	`'md'`
`color`	Range color theme	`'primary' \| 'secondary' \| 'accent' \| 'success' \| 'warning' \| 'info' \| 'error'`	-
`disabled`	Disable the range input	`boolean`	`false`
`showValue`	Show current value below the range	`boolean`	`false`
`showSteps`	Show step markers below the range	`boolean`	`false`
`className`	Additional CSS classes	`string`	-
`data-testid`	Test ID for testing	`string`	-

Accessibility

Uses native <input type="range"> for full accessibility
Value is announced by screen readers as percentage
Keyboard navigation with arrow keys supported
Works with showValue for visual value display