The library

Techniques, not templates

Every trick recreated from the source video as a live, self-contained demo. Search, filter, open, steal.

1 / 5

Before/After Slider Driven by a Range Input

A comparison slider where the whole drag is a native <input type="range">, stretched over the image at opacity 0. One line of JavaScript copies its value into --pos; clip-path: inset(0 0 0 var(--pos)) on the top layer and left: var(--pos) on the divider read the same variable, so the seam and the handle can never drift apart. Pointer capture, touch, and arrow-key stepping all come from the input. Two details make it line up. The thumb has to be 1px wide, because a range maps its value across the track minus the thumb, so a default 16px thumb leaves the divider short of the edges at 0 and 100. And step="0.1", because the default step of 1 quantises a 560px sweep into 5.6px jumps.

cssjavascriptinteractionimagesclip-pathslider

2 / 5

Blend Any Two Colours with color-mix()

Mixing two colours used to mean a preprocessor function or hand-computed hex values. color-mix() does it in the browser: name a colour space, two colours, and how much of the first one you want. Drag the slider and watch the result bar and the declaration change together — the bar's background is the very color-mix() call printed underneath it.

csscolorcolor-mixinteractionslider

3 / 5

Before/After Image Slider with Clip-Path

This component demonstrates a draggable image comparison slider built by layering two images and dynamically adjusting the `clip-path` property of the top layer using a CSS custom property controlled by JavaScript.

cssjavascriptclip-pathsliderdragimage comparison

4 / 5

Range Slider Gradient Fill

A custom-styled range slider where the track fills with a gradient color from the left as the slider thumb is moved, using a CSS background-size trick and a JavaScript-driven custom property.

cssinputgradientjavascriptsliderrange

5 / 5

Gradient Range Slider with Value Bubble

A custom styled HTML range input with a dynamic gradient fill on the track and a live value bubble that follows the thumb as it's dragged.

gradientjavascriptcss variablessliderrange inputform elements