Range Slider

Inputs

Dual-thumb range selector with min/max constraints and value display.

Instalação via CLI

$ npx kikitocn add range-slider

Interno:

@/lib/utils

Exemplo de uso

Range SliderExample.tsx

import { RangeSlider } from "@/components/ui/cn/range-slider/RangeSlider";

export function RangeSliderExample() {
  return (
    <RangeSlider />
  );
}

Props

Prop	Tipo	Padrão	Descrição
`value`	`[number, number]`	`undefined`	Par [mín, máx] atual (controlled)
`defaultValue`	`[number, number]`	`[25, 75]`	Par inicial (uncontrolled)
`onChange`	`(value: [number, number]) => void`	`undefined`	Callback quando o intervalo muda
`min`	`number`	`0`	Valor mínimo possível
`max`	`number`	`100`	Valor máximo possível
`step`	`number`	`1`	Incremento por passo
`label`	`string`	`undefined`	Label acima do range slider
`showValues`	`boolean`	`true`	Exibe os valores mín e máx selecionados
`disabled`	`boolean`	`false`	Desabilita o range slider

Voltar para Inputs

Carregando…

Range Slider

Range Slider

Default

Default