RangeSlider

The built-in rangeslider tag — pick a range with two thumbs. Usage, the defaultValue pair, marks, options, and live examples.

A built-in tag for a range slider — let the reader pick a low and high bound by dragging either of two thumbs. It ships with aardvark, so it’s a single tag with no setup. The defaultValue is a pair of numbers (the starting low and high), and minRange keeps the two thumbs a minimum distance apart.

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

Demonstrations

Basic range

Set min, max, and a defaultValue of two numbers — the starting low and high. Drag either thumb.

Marks and a minimum gap

Pass marks as a JSON array of {value, label}, and minRange to fix the smallest gap the two thumbs may have. Add restrictToMarks to snap to the marks only.

Colors, sizes, and inverted fill

color paints the filled span between the thumbs; size and radius take xs–xl. Add inverted to fill the outside instead of the inside, and labelAlwaysOn to keep both value bubbles visible.

Disabled

Add the bare disabled flag to make the range read-only.

With other components

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

Attributes

Omit any attribute to take its default.

CSS Selectors

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

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

/* Mantine Styles API parts */
.mantine-RangeSlider-root { }
.mantine-RangeSlider-track { }
.mantine-RangeSlider-bar { }
.mantine-RangeSlider-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 either thumb reads the range values, logs them to the console, and alerts them: