Elastic Slider

Inputs

Volume-style slider with an elastic squish/scale effect when dragged past its edges.

Instalação via CLI

$ npx kikitocn add elastic-slider

Interno:

@/lib/utils@radix-ui/react-slidermotionlucide-react

Exemplo de uso

Elastic SliderExample.tsx

import { ElasticSlider } from "@/components/ui/cn/elastic-slider/ElasticSlider";

export function ElasticSliderExample() {
  return (
    <ElasticSlider />
  );
}

Props

Prop	Tipo	Padrão	Descrição
`value`	`number`	—	Valor atual (controlado)
`defaultValue`	`number`	`50`	Valor inicial (não-controlado)
`onChange`	`(value: number) => void`	—	Callback ao arrastar
`min`	`number`	`0`	Valor mínimo
`max`	`number`	`100`	Valor máximo
`step`	`number`	`0.01`	Incremento por passo
`label`	`string`	`'Value'`	Rótulo acessível (aria-label)
`className`	`string`	—	Classes CSS extras
`style`	`React.CSSProperties`	—	Estilos inline extras

Voltar para Inputs

Carregando…