Fieldbook
Sign in

Inputs

Elastic tug slider

A slider that stretches like an elastic band when dragged past its ends, snapping the track back with a bounce once released.

Using Elastic tug slider

A slider that stretches like an elastic band when dragged past its ends, snapping the track back with a bounce once released.

Try the live preview with a pointer and keyboard, then check focus visibility and the narrow layout in your own page. Use the plate number or slug when asking your coding agent to fetch this component.

Props: value, stepped, accent

Which frameworks are available?

The catalog lists these versions: react, vue, svelte, astro, html. The live preview on this page runs React.

How do I access the implementation?

The code, framework versions and installation commands are available in the workbench above.

Connect your agent

Nearby

Single value slider
2791Single value sliderInputsA horizontal slider with one draggable thumb that fills the track behind it so the current value reads at a glance.
Before/After reveal handle
2758Before/After reveal handleInputsA draggable divider over two stacked scenes that reveals one on the left and the other on the right, moved by pointer, click to jump and arrow keys.
Exposure dial slider
2766Exposure dial sliderInputsA photo preview with a circular exposure readout in its corner above a draggable ruler of ticks that sets the exposure value in EV.
Vertical brightness slider
2788Vertical brightness sliderInputsA tall pill slider that fills with light from the bottom as you drag, resists past either end and springs back on release.
Auto Grow Textarea
2792Auto Grow TextareaInputsA multi-line text field that grows taller as the person types more, instead of scrolling inside a fixed box.
Character budget counter
2760Character budget counterInputsA compose field with a remaining-characters readout that punches on a spring and warms in color as the budget runs out.