Range

Selecciona valores numéricos usando un control deslizante interactivo.

Importar

import { Range } from 'asterui'

Ejemplos

Range básico

Control deslizante de rango simple con configuración predeterminada.

</>

import { Range } from 'asterui'

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

export default App

Con visualización de valor

Control deslizante de rango mostrando el valor actual.

</>

50

import { Range } from 'asterui'

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

export default App

Con pasos

Control deslizante de rango con marcadores de pasos visibles.

</>

|||||||||||

import { Range } from 'asterui'

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

export default App

Controlado

Control deslizante de rango controlado con gestión 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

Rango personalizado

Control deslizante de rango con valores mín, máx y paso personalizados.

</>

5

import { Range } from 'asterui'

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

export default App

Colores

Controles deslizantes de rango en varios colores 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

Tamaños

Controles deslizantes de rango en varios tamaños.

</>

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

Deshabilitado

Control deslizante de rango deshabilitado.

</>

import { Range } from 'asterui'

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

export default App

Ejemplo de control de volumen

Ejemplo del mundo real de un control de volumen.

</>

🔊

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

En formulario

Control deslizante de rango integrado con 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

Propiedad	Descripción	Tipo	Predeterminado
value	Valor controlado	number	-
defaultValue	Valor predeterminado (no controlado)	number	50
onChange	Callback cuando cambia el valor	(value: number) => void	-
min	Valor mínimo	number	0
max	Valor máximo	number	100
step	Incremento de paso	number	1
size	Tamaño del rango	'xs' | 'sm' | 'md' | 'lg'	'md'
color	Tema de color del rango	'primary' | 'secondary' | 'accent' | 'success' | 'warning' | 'info' | 'error'	-
disabled	Deshabilitar la entrada de rango	boolean	false
showValue	Mostrar valor actual debajo del rango	boolean	false
showSteps	Mostrar marcadores de pasos debajo del rango	boolean	false
className	Clases CSS adicionales	string	-
data-testid	ID de prueba para pruebas	string	-

Accesibilidad

• Usa <input type="range"> nativo para accesibilidad completa
• El valor se anuncia por lectores de pantalla como porcentaje
• Navegación por teclado con teclas de flecha soportada
• Funciona con showValue para visualización de valor visual