Slider

Formulário

Um valor numa escala, com campo para digitar o número exato (com prefixo ou sufixo), ou um intervalo entre dois valores.

Substitui no Brain:fp-sliderfp-slider-row

Valor, percentual e intervalo

Limite de antecipação

Taxa

Faixa de ticket

mín 200máx 1.800

"use client";

import { FormField, RangeSlider, Slider } from "@paytime/ui";
import { useState } from "react";

export default function Example() {
  const [limit, setLimit] = useState(45000);
  const [rate, setRate] = useState(2.5);
  const [range, setRange] = useState<[number, number]>([200, 1800]);
  return (
    <div className="flex max-w-xl flex-col gap-6">
      <FormField label="Limite de antecipação">
        <Slider value={limit} onValueChange={setLimit} min={0} max={100000} step={500} showInput prefix="R$" />
      </FormField>
      <FormField label="Taxa">
        <Slider value={rate} onValueChange={setRate} min={0} max={10} step={0.1} showInput suffix="%" />
      </FormField>
      <FormField label="Faixa de ticket">
        <RangeSlider value={range} onValueChange={setRange} min={0} max={2000} step={50} aria-label="Faixa de ticket" />
      </FormField>
    </div>
  );
}