Inputs

Vertical brightness slider

A tall pill slider that fills with light from the bottom as you drag, resists past either end and springs back on release.

Brightness 70%

Using Vertical brightness slider

A tall pill slider that fills with light from the bottom as you drag, resists past either end and springs back on release.

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, accentColor, icon

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

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.

2759Bounce drop toggleInputsA tall vertical toggle switch whose ball drops to the bottom with a bouncy settle when switched off and glides back up with a tight spring when switched on.

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

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.

2760Character budget counterInputsA compose field with a remaining-characters readout that punches on a spring and warms in color as the budget runs out.

1933Checkbox motion labInputsA single oversized checkbox for tuning exactly how firmly it presses and how slowly its checkmark draws in.