Slider with Step Indicators

Steps need labels—show every stop! This React slider displays all step markers (0, 25, 50, 75, 100) below with step 25 snapping. Built with shadcn/ui Slider and tabular-nums for alignment, the complete step legend shows available values—perfect for rating scales, level selectors, tier choices, increment controls, or any stepped input where seeing all discrete options improves selection and prevents confusion about available values.

Slider with Step Indicators preview

Installation

npx shadcn@latest add https://www.shadcn.io/r/slider-standard-5.json

npx shadcn@latest add https://www.shadcn.io/r/slider-standard-5.json

pnpm dlx shadcn@latest add https://www.shadcn.io/r/slider-standard-5.json

bunx shadcn@latest add https://www.shadcn.io/r/slider-standard-5.json

Related Components

FAQ