Todos os componentes

Sliding Number Counter

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

Motion Primitives MIT forms

O que é

Sliding Number Counter é um componente de formulário para React e Tailwind CSS, da biblioteca Motion Primitives, 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 Motion Primitives e é redistribuído sob a licença MIT, que permite uso comercial. O aviso de copyright viaja com o código.

Sliding Number Counter

app/docs/sliding-number/sliding-slider.tsx
'use client';
import { SlidingNumber } from '@/components/core/sliding-number';
import { useState } from 'react';

export function SlidingNumberWithSlider() {
  const [value, setValue] = useState(100);
  const [width, setWidth] = useState(0);

  return (
    <div className='flex flex-col items-start gap-0'>
      <div className='flex items-center gap-2 font-mono'>Current ARR:</div>
      <div className='inline-flex items-center gap-1 font-mono leading-none'>
        $<SlidingNumber value={value} />
      </div>
      <input
        type='range'
        value={value}
        min={500}
        max={100000}
        step={50}
        onChange={(e) => setValue(+e.target.value)}
        className='mt-2 accent-indigo-950'
      />
    </div>
  );
}

Componentes parecidos