Slidebox

Elastic switch

Native checkbox · CSS motion

Click the checkbox or press SpaceChecked

CSS SETTINGS / EXCERPT

--slidebox-width: 2;
--slidebox-spacing: 0.33;
--slidebox-deform: 0.1;
--slidebox-duration: 200ms;

Applies the geometry and easing used in the article’s demo.

CONTROLS / GEOMETRY

Shape & movement

02 / GEOMETRY

Track width

Thumb spacing

Press deformation

Duration

03 / EXPERIMENTAL

Enable pointer dragging

Off by default. Enable to drag the switch thumb; clicks and keyboard controls still work. Dragging is an experimental, opt-in JavaScript enhancement.

04 / APPEARANCE

Colors

Palette

05 / EASING

Motion

Family

Direction

easeInOutSine

Elastic and Bounce use sampled CSS linear() curves to retain the overshoot.

CHECKBOXES / COLOR COMPARISON

Checkboxes

Toggle each example to compare. These geometry presets stay fixed while you adjust the playground.
Name	Width	Spacing	Deform
Default	×2	0.33	0.1
Material UI	×2.5	−0.33	0.1
Old iOS	×1.6	0.03	0

Compare nabous.dev glass with browser/system colors. Both columns keep their own palette; motion follows the playground settings. Material UI and Old iOS are geometry presets, not exact replicas or framework integrations.

06 / RANGE

Range slider

Experimental

Native input, no JavaScript required for styling or interaction. Spacing, palette, and motion follow the playground settings above.

Experimental range

Volume 40

Try the arrow keys. The slider works without JavaScript; directional motion and progress fill are independent, optional enhancements.

INSTALL

Add it to your project

npm install @monabbous/slidebox

Use plain CSS, Sass or Less mixins, or the Tailwind v3/v4 plugin. Set your defaults and override individual controls.

Read the usage guide