logo svelte /motion v2.4.0
FIG-001/ DRAG

a slider knob on a plain element.

drag() makes the knob draggable on x and keeps it inside its track. Reset animates the knob home with animate(); both work on the same x value, so the next drag starts from wherever the knob is.

  • axis: 'x' locks the knob to one axis and sets touch-action: pan-y, so a vertical swipe on a phone still scrolls the page.
  • constraints: track keeps the knob inside the track element. Release it with some speed and it glides, then settles against the edge.
  • drag() and animate() share the knob's x, so Reset springs it home and the next drag continues from where it is.
↩ all examples
constraints · track mode · live running source
// slider knob value · 0
drag(knob, { axis: 'x', constraints: track })
category · drag
sheet · sheet 01 / 01
⟳ to re-run

Vanilla drag()