Carregando…

Slider

Inputs

Single-value or dual-thumb range input with marks, label, value display and intent colors.

Range Slider

Unificado

Instalação via CLI

$ npx kikitocn add slider

Interno:

@/lib/utils

Exemplo de uso

SliderExample.tsx

import { Slider } from "@/components/ui/cn/slider/Slider";

export function SliderExample() {
  return (
    <Slider />
  );
}

Props

Prop	Tipo	Padrão	Descrição
`range`	`boolean`	`false`	Ativa o modo de intervalo com dois thumbs (ex-RangeSlider). Com range=true, value/defaultValue/onChange operam com [number, number].
`showValues`	`boolean`	`true`	range=true: exibe o par de valores (lo – hi)
`value`	`number`	`undefined`	Valor atual (controlled)
`defaultValue`	`number`	`50`	Valor inicial (uncontrolled)
`onChange`	`(value: number) => void`	`undefined`	Callback quando o valor muda
`min`	`number`	`0`	Valor mínimo
`max`	`number`	`100`	Valor máximo
`step`	`number`	`1`	Incremento por passo
`label`	`string`	`undefined`	Label acima do slider
`showValue`	`boolean`	`false`	Exibe valor atual ao lado do label
`marks`	`SliderMark[]`	`undefined`	Marcadores de valor: { value, label? }[]
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Espessura da trilha e tamanho do thumb
`intent`	`'primary' \| 'info' \| 'success' \| 'warning' \| 'danger'`	`'primary'`	Cor da trilha preenchida
`disabled`	`boolean`	`false`	Desabilita o slider

Carregando…