AlphaSlider

The built-in alphaslider tag — pick an alpha (opacity, 0–1) for a color. Usage, options, and live examples.

A built-in tag for an alpha slider — a thin track that fades a color from transparent to opaque, for picking an alpha (opacity) from 0 to 1. It’s one of Mantine’s color-picker building blocks. It ships with aardvark, so it’s a single tag with no setup. Set the base color so the track can show the fade, and defaultValue for the starting opacity.

Use it as {% alphaslider %} in Markdown, or call it from Python logic (loops, snippets) via component('aardvark', 'alphaslider', …).

Demonstrations

Basic alpha

Set the base color (so the track can render its fade) and a defaultValue from 0 (transparent) to 1 (opaque). Drag to change the opacity.

Colors, sizes, and radius

Any base color paints the track’s fade; size sets the track thickness (xs–xl) and radius rounds its ends (xs–xl).

With other components

Generate one alpha slider per swatch from data with a Python loop — the same component('aardvark', 'alphaslider', …) call, once per item, laid out in a card grid.

Attributes

Omit any attribute to take its default.

CSS Selectors

Target a {% alphaslider %} from your own CSS with the island data attribute or the Mantine Styles API part classes:

/* Every AlphaSlider instance on the page */
[data-aardvark-island="AlphaSlider"] { }

/* Mantine Styles API parts */
.mantine-AlphaSlider-slider { }
.mantine-AlphaSlider-sliderOverlay { }
.mantine-AlphaSlider-thumb { }

Injecting Attributes

Pass attr={…} to forward raw HTML attributes — including inline event handlers — straight onto the rendered element. Here it is wired to onchange, so dragging the alpha control reads the changed control value, logs it to the console, and alerts it: