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 size for the thickness of the track.

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. Leave it off and the slider starts at 0 — red, the left end of the track.

Source: Markdown

Source: Python

Sizes

size sets the thickness of the track and the size of the thumb, from xs to xl (default md).

Source: Markdown

Source: Python

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.

Red zone

Green zone

Blue zone

Source: Python

Attributes

Omit any attribute to take its default.

Attribute	Values	Description
`defaultValue`	integer `0`–`360`	Starting hue — the reader can drag it. Defaults to `0` (red).
`size`	`xs`, `sm`, `md`, `lg`, `xl`	Thickness of the track and size of the thumb. Defaults to `md`.
`attr`	raw-HTML map	Extra HTML attributes, passed as `attr={…}`.

The change event fires when the drag ends

The slider keeps its own value as the reader drags, and emits one change event when the drag finishes or an arrow key commits a step — not on every pixel of movement. So an attr={'onchange': …} handler runs once per adjustment rather than hundreds of times, and reads the hue the reader settled on. Arrow keys move the hue in 5% steps of the full spectrum (18°) while the track has focus.

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:

Source: Markdown

Source: Python