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

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

Details

  • Title: Snappy Slider
  • Author: Mangle Kuo
  • GitHub: ghcpuman902
  • Tags: react, v0, tailwind, form, input
  • Version: 0.1.0
  • Complexity: intermediate
  • Category: form-elements

Example Usage

<SnappySlider
  values={[0, 25, 50, 75, 100]}
  defaultValue={50}
  label="Opacity"
  suffix="%"
  onChange={(value) => console.log(value)}
/>

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