Back to playground

Slider

Pill-style slider with tick marks, editable input, and snap points.

inputinteraction

Default

Volume
+1.3 db

Editable Input

Click the value to type a specific number

Gain
0.0 db
Frequency
+1000.0 Hz

Snap Points

Discrete positions that snap when dragging

Quality
+50.0
Speed
+1.0 x
Preset
0.0

Combined

Editable + Snap points together

Zoom Level
+100.0 %

Notes

Editable: Pass editable prop to allow clicking the value to type directly. Press Enter to confirm or Escape to cancel.

Snap Points: Pass snapPoints={[0, 25, 50, 75, 100]} for discrete positions. The slider will snap to the nearest point while dragging.

Tick Count: Adjust tickCount to match your snap points for visual alignment.