Range

Apresentação

O componente Range é responsável por criar um controle deslizante (slider) que permite aos usuários selecionar um valor dentro de um intervalo específico. É ideal para ajustes de valores numéricos, como volume, brilho, preço ou qualquer outra configuração que precise de um valor dentro de um range.

Quando usar

• Para ajuste de valores numéricos
• Para seleção de faixas de preço
• Para controle de volume
• Para ajuste de brilho
• Para seleção de níveis
• Para configuração de intensidade
• Para ajuste de zoom
• Para seleção de tamanhos
• Para controle de velocidade
• Para ajuste de qualidade

Forma básica de uso

import { Range } from 'eitri-luminus';

// Range básico
<Range min={0} max={100} />

// Range com valor inicial
<Range 
  min={0} 
  max={100} 
  defaultValue={50} 
/>

// Range com step
<Range 
  min={0} 
  max={100} 
  step={10} 
/>

// Range com classes personalizadas
<Range 
  min={0} 
  max={100} 
  className="range-primary" 
/>

// Range desabilitado
<Range 
  min={0} 
  max={100} 
  disabled 
/>

// Range com evento onChange
<Range 
  min={0} 
  max={100} 
  onChange={(e) => console.log(e.target.value)} 
/>

// Range com valor controlado
const [value, setValue] = useState(50);
<Range 
  min={0} 
  max={100} 
  value={value}
  onChange={(e) => setValue(Number(e.target.value))} 
/>

// Range com label
<div className="flex flex-col gap-2">
  <label htmlFor="volume">Volume</label>
  <Range 
    id="volume"
    min={0} 
    max={100} 
    defaultValue={50} 
  />
  <span>{value}%</span>
</div>

Propriedades

Propriedade	Tipo	Descrição
min	number	Valor mínimo do range
max	number	Valor máximo do range
step	number	Incremento entre valores
value	number	Valor atual (controlado)
defaultValue	number	Valor inicial
disabled	boolean	Desabilita o range
onChange	function	Função chamada quando o valor muda
className	string	Classes CSS adicionais
id	string	Identificador único do componente

Heranças

O componente Range herda todas as propriedades comuns da biblioteca através da interface CommonProps, que inclui:

• Propriedades de estilo (margin, padding, etc)
• Propriedades de layout (flex, grid, etc)
• Propriedades de posicionamento
• Propriedades de acessibilidade
• Propriedades de identificação (id, data-e)

Observações

• O componente usa a classe 'range' para estilização base
• É possível personalizar a aparência usando classes do Tailwind
• O componente é responsivo por padrão
• Mantém a semântica HTML apropriada
• Suporta estados controlados e não controlados
• Pode ser desabilitado
• Suporta eventos de mudança
• Pode ser estilizado com diferentes cores
• Mantém a acessibilidade por padrão
• Pode ser usado em formulários
• Suporta diferentes tamanhos
• Pode ser combinado com labels
• Suporta valores numéricos
• Pode ser usado em layouts flexíveis