Todos os componentes

Motion Number Slider

Motion Number Slider é um componente de formulário para React e Tailwind CSS, da biblioteca UI Layouts, com licença MIT. Copia e cola no teu projeto.

UI Layouts MIT forms

O que é

Motion Number Slider é um componente de formulário para React e Tailwind CSS, da biblioteca UI Layouts, com licença MIT. Copia e cola no teu projeto.

Como usar

Abre o componente no catálogo, carrega em copiar, e cola no teu projeto. O prompt copiado leva o código e as regras para o teu agente o reproduzir sem alterar nada.

Abrir no catálogo

Cinco cópias grátis por mês. Sem cartão.

Não precisa de pacotes além do que o projeto já tem

Licença

Este componente vem de UI Layouts e é redistribuído sob a licença MIT, que permite uso comercial. O aviso de copyright viaja com o código.

Motion Number Slider

./registry/components/motion-number/motion-number-slider.tsx
'use client';
import { DualRangeSlider } from '@/components/ui/slider';
import React, { useState } from 'react';

export default function MotionNumberSlider() {
  const [widthPercentage, setWidthPercentage] = useState(70);
  return (
    <>
      <div className='w-3/5 mx-auto px-10 gap-10 py-16'>
        <div>
          <h1>Width</h1>
          <DualRangeSlider
            label
            lableContenPos={'left'}
            value={[widthPercentage]}
            onValueChange={([widthPercentage]) =>
              widthPercentage != null && setWidthPercentage(widthPercentage)
            }
            min={0}
            max={100}
            step={1}
          />
        </div>
      </div>
    </>
  );
}

Componentes parecidos