AngleSlider

The built-in angleslider tag — pick an angle on a dial (0–360°). Usage, options, marks, and live examples.

A built-in tag for an angle slider — a circular dial for picking an angle from 0 to 360 degrees. It ships with aardvark, so it’s a single tag with no setup. Set the dial diameter with size, the starting angle with defaultValue, and the increment with step.

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

Demonstrations

Basic dial

Set defaultValue (in degrees) and a size. Drag around the dial to change it.

Stepping and marks

step snaps the angle to a fixed increment; marks adds labelled ticks as a JSON array of {value, label}. A larger thumbSize makes the handle easier to grab.

No center label, and disabled

The center shows the current degree label by default. Set withLabel=false to hide it, and add the bare disabled flag for a read-only dial.

With other components

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

Attributes

Omit any attribute to take its default.

The center label format (formatLabel in Mantine) is a JavaScript function rather than a value, so it can’t be set from a build-time tag or component('aardvark', 'angleslider', …) call — the dial shows the raw degree value. Toggle it off entirely with withLabel=false.

CSS Selectors

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

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

/* Mantine Styles API parts */
.mantine-AngleSlider-root { }
.mantine-AngleSlider-thumb { }
.mantine-AngleSlider-label { }

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 turning the dial reads the changed control value, logs it to the console, and alerts it: