Carregando…

Simple Modern Slider

Inputs

Minimal native range input restyled via pseudo-elements, with a floating value label above the thumb.

Instalação via CLI

$ npx kikitocn add simple-modern-slider

Interno:

@/lib/utils

Exemplo de uso

Simple Modern SliderExample.tsx

import { SimpleModernSlider } from "@/components/ui/cn/simple-modern-slider/SimpleModernSlider";

export function SimpleModernSliderExample() {
  return (
    <SimpleModernSlider />
  );
}

Props

Prop	Tipo	Padrão	Descrição
`value`	`number`	—	Valor atual (controlado)
`defaultValue`	`number`	`0`	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`	`1`	Incremento por passo
`label`	`string`	`'Value'`	Rótulo acessível (aria-label)
`showValue`	`boolean`	`true`	Exibe o valor atual acima do thumb
`className`	`string`	—	Classes CSS extras
`style`	`React.CSSProperties`	—	Estilos inline extras

Voltar para Inputs

Carregando…