Range

Selecione valores numéricos usando um controle deslizante interativo.

Importação

import { Range } from 'asterui'

Exemplos

Range Básico

Controle deslizante simples com configurações padrão.

</>

import { Range } from 'asterui'

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

export default App

Com Exibição de Valor

Controle deslizante mostrando o valor atual.

</>

50

import { Range } from 'asterui'

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

export default App

Com Passos

Controle deslizante com marcadores de passo visíveis.

</>

|||||||||||

import { Range } from 'asterui'

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

export default App

Controlado

Controle deslizante controlado com gerenciamento de estado.

</>

50

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

Range Customizado

Controle deslizante com valores min, max e step customizados.

</>

5

import { Range } from 'asterui'

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

export default App

Cores

Controles deslizantes em várias cores de tema.

</>

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

Tamanhos

Controles deslizantes em vários tamanhos.

</>

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

Desabilitado

Controle deslizante desabilitado.

</>

import { Range } from 'asterui'

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

export default App

Exemplo de Controle de Volume

Exemplo do mundo real de um controle de volume.

</>

🔊

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

Em Formulário

Controle deslizante integrado com componente Form.

</>

Volume

50

 

Brightness

75

 

Submit

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

Propriedade	Descrição	Tipo	Padrão
value	Valor controlado	number	-
defaultValue	Valor padrão (não controlado)	number	50
onChange	Callback quando valor muda	(value: number) => void	-
min	Valor mínimo	number	0
max	Valor máximo	number	100
step	Incremento de passo	number	1
size	Tamanho do range	'xs' | 'sm' | 'md' | 'lg'	'md'
color	Tema de cor do range	'primary' | 'secondary' | 'accent' | 'success' | 'warning' | 'info' | 'error'	-
disabled	Desabilitar a entrada do range	boolean	false
showValue	Mostrar valor atual abaixo do range	boolean	false
showSteps	Mostrar marcadores de passo abaixo do range	boolean	false
className	Classes CSS adicionais	string	-
data-testid	ID de teste para testes	string	-

Acessibilidade

• Usa <input type="range"> nativo para acessibilidade completa
• Valor é anunciado por leitores de tela como porcentagem
• Navegação por teclado com teclas de seta suportada
• Funciona com showValue para exibição visual de valor