Snappy Slider

An interactive slider with snap-to points, visual markers, direct numeric input, touch and mouse drag support, out-of-bounds indication, and double-click reset.

v0.1.0
🍰
🏃
🎓
Intermediate
form-elements
#react#v0#tailwind#form#input

Snappy Slider

FM radio tuner

Snap to London FM stations. Drag the track, type a frequency, or double-click to reset.

MHz
95.8
95.8 MHzCapital FM

Opacity

Simple percentage slider with snap points at common values.

%
50

Install

Requires a project with shadcn/ui initialized. Installs all 1 file and any listed registry dependencies.

npx shadcn@latest add https://manglekuo.com/showcase/r/snappy-slider.json

Documentation

Snappy Slider

An interactive slider with snap points, visual markers, direct numeric input, and double-click reset.

Usage

import { SnappySlider } from '@/components/ui/snappy-slider'; <SnappySlider  values={[0, 25, 50, 75, 100]}  defaultValue={50}  label="Opacity"  suffix="%"  onChange={(value) => console.log(value)}/>Language: jsx

Props

  • values (number[]): Snap points displayed as markers on the track.
  • defaultValue (number): Value restored on double-click.
  • value (number, optional): Controlled value.
  • onChange ((value: number) => void): Called when the value changes.
  • min / max (number, optional): Input clamp range.
  • step (number, optional): Step size for free dragging (default 0.1).
  • snapping (boolean, default: true): Snap to nearest marker when within threshold.
  • label (string): Accessible label shown above the slider.
  • prefix / suffix (string, optional): Shown in the numeric input.
  • config.snappingThreshold (number, default: 1): Distance to snap to a marker.
  • config.labelFormatter ((value: number) => string, optional): Custom thumb label.

Interaction

  • Drag the track or thumb to change the value
  • Type directly in the numeric input; blur or Enter to commit
  • Arrow keys adjust by one step; Shift+Arrow by ten
  • Double-click the track to reset to defaultValue
  • Out-of-range values show a muted thumb with <min or >max label