HueSlider

The built-in hueslider tag — pick a hue (0–360) along the color spectrum. Usage, options, and live examples.

A built-in tag for a hue slider — a thin track of the full color spectrum for picking a hue from 0 to 360. It’s one of Mantine’s color-picker building blocks. It ships with aardvark, so it’s a single tag with no setup. Set defaultValue for the starting hue, and tune the track with size and radius.

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

Demonstrations

Basic hue

Set a defaultValue from 0 to 360 (the starting hue). Drag along the spectrum to change it.

Sizes and radius

size sets the track thickness (xs–xl) and radius rounds its ends (xs–xl).

With other components

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

Attributes

Omit any attribute to take its default.

CSS Selectors

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

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

/* Mantine Styles API parts */
.mantine-HueSlider-slider { }
.mantine-HueSlider-sliderOverlay { }
.mantine-HueSlider-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 hue control reads the changed control value, logs it to the console, and alerts it: