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>

// Range com métodos via ref
import { useRef } from 'react';

const MyComponent = () => {
  const rangeRef = useRef<Range>(null);

  const handleGetValue = () => {
    const value = rangeRef.current?.getValue();
    console.log('Valor atual:', value);
  };

  const handleSetValue = () => {
    rangeRef.current?.setValue(75);
  };

  const handleGetMin = () => {
    const min = rangeRef.current?.getMin();
    console.log('Valor mínimo:', min);
  };

  const handleGetMax = () => {
    const max = rangeRef.current?.getMax();
    console.log('Valor máximo:', max);
  };

  const handleGetStep = () => {
    const step = rangeRef.current?.getStep();
    console.log('Step:', step);
  };

  return (
    <div>
      <Range 
        ref={rangeRef}
        min={0} 
        max={100} 
        step={5}
      />
      <button onClick={handleGetValue}>Obter Valor</button>
      <button onClick={handleSetValue}>Definir Valor (75)</button>
      <button onClick={handleGetMin}>Obter Min</button>
      <button onClick={handleGetMax}>Obter Max</button>
      <button onClick={handleGetStep}>Obter Step</button>
    </div>
  );
};

Métodos via Ref

O componente Range expõe os seguintes métodos públicos que podem ser acessados através de uma ref:

Método	Tipo de Retorno	Descrição
getValue()	number	Retorna o valor atual do range
setValue(value: number)	void	Define o valor do range
getMin()	number	Retorna o valor mínimo do range
getMax()	number	Retorna o valor máximo do range
getStep()	number	Retorna o step do range

Exemplo de uso dos métodos

import { useRef } from 'react';
import { Range } from 'eitri-luminus';

const VolumeControl = () => {
  const volumeRef = useRef<Range>(null);

  const handleMute = () => {
    volumeRef.current?.setValue(0);
  };

  const handleMaxVolume = () => {
    const max = volumeRef.current?.getMax() || 100;
    volumeRef.current?.setValue(max);
  };

  const handleHalfVolume = () => {
    const max = volumeRef.current?.getMax() || 100;
    volumeRef.current?.setValue(max / 2);
  };

  return (
    <div>
      <Range 
        ref={volumeRef}
        min={0} 
        max={100} 
        step={1}
        onChange={(e) => console.log('Volume:', e.target.value)}
      />
      <button onClick={handleMute}>Mudo</button>
      <button onClick={handleHalfVolume}>50%</button>
      <button onClick={handleMaxVolume}>Máximo</button>
    </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
• Suporta métodos públicos via ref para controle programático (getValue, setValue, getMin, getMax, getStep)