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.

Source: Markdown

Source: Python

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.

Source: Markdown

Source: Python

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.

200

Source: Markdown

Source: Python

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.

Heading

Pitch

270

Roll

135

Source: Python

Attributes

Omit any attribute to take its default.

Attribute	Values	Description
`size`	integer	Diameter of the dial in pixels. Defaults to `60`.
`step`	integer	Increment per move, in degrees. Defaults to `1`.
`defaultValue`	integer	Starting angle in degrees — the reader can drag it.
`thumbSize`	integer	Diameter of the thumb in pixels. Defaults to a fifth of `size`.
`marks`	JSON array string	Labelled ticks as `[{"value": n, "label": "…"}, …]`.
`withLabel`	boolean	Show the degree label in the center (on by default; set `false` to hide).
`disabled`	boolean	Make the dial read-only — it stops responding to drags and drops out of the tab order.
`attr`	dict (`attr={…}`)	Raw HTML attributes (e.g. `onchange`) applied to the dial’s root element.

The center label always shows the raw degree value. Mantine formats it through formatLabel, a JavaScript function, and props are serialized as JSON on their way to the component, so no tag or component('aardvark', 'angleslider', …) call can supply one. Turn the label off entirely with withLabel=false.

Good to know

marks is parsed at build time. A value that isn’t valid JSON doesn’t fail the build — the dial renders without marks — but it does emit a build warning, so a typo shows up in the build output rather than as a silently unmarked dial.

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 { }
.mantine-AngleSlider-marks { }
.mantine-AngleSlider-mark { }

Injecting Attributes

Pass attr={…} to forward raw HTML attributes — including inline event handlers — straight onto the rendered element. The change event fires when a drag finishes or an arrow key steps the angle — not continuously while the thumb is moving — and carries the new value in degrees. Here it is wired to onchange, so turning the dial reads the changed control value, logs it to the console, and alerts it:

Source: Markdown

Source: Python