Stepped Slider

Font-size slider with discrete tick dots under the rail and a mono value chip in the header.

16
1224

Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.

Import & use
import { Form30 } from "@/components/beste/piece/form30";

<Form30
  label="Font size"
  min={12}
  max={24}
  step={1}
  value={16}
  marks={[
    12,
    14,
    16,
    18,
    20,
    22,
    24
  ]}
/>