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 (it starts fully opaque, 1, when you leave it off).

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.

Source: Markdown

Source: Python

Colors and sizes

Any base color paints the track’s fade; size sets the track thickness (xs, sm, md, lg, xl). The band comes with fully rounded ends and no attribute changes that shape — restyle .mantine-AlphaSlider-sliderOverlay (see the CSS selectors below) for a different one.

Source: Markdown

Source: Python

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.

Primary

Success

Danger

Source: Python

Attributes

Omit any attribute to take its default.

Attribute	Values	Description
`color`	color string	The base color the alpha applies to (e.g. `#1c7ed6`). Without it the track has no fade to show.
`defaultValue`	number `0`–`1`	Starting alpha — the reader can drag it. `0` is transparent, `1` is opaque (the default).
`size`	`xs`, `sm`, `md` (default), `lg`, `xl`	Track thickness.
`attr`	dict (`attr={…}`)	Raw HTML attributes (e.g. `onchange`) applied to the slider’s root element.

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. The change event fires once a drag ends, or each time an arrow key steps the value — not continuously while dragging — and carries the new alpha rounded to two decimals. Here it is wired to onchange, so releasing the thumb reads the new value, logs it to the console, and alerts it:

Source: Markdown

Source: Python