v0.0.2older

Documentation version

Open files in your editor

Project folderVersion

On a Mac, right-click the folder in Finder, hold Option, and choose Copy as Pathname.On Windows, hold Shift, right-click the folder, and choose Copy as path, then delete the quote marks.

Open files in

ComponentsLumos 0.0.2NewOpen component

Range

A slider for a number, with the value shown as it moves.

A range is the right control when the rough size of the number matters more than its exact value — a budget, a distance, a weighting. Range shows the number as the handle moves, so the reader is never guessing where they have landed.

astro

<Range label="Budget" min={0} max={10000} step={500} unit="$" />

<Range label="Budget" min={0} max={10000} step={500} unit="$" />

Props

Prop	Type	Default	What it does
`render`	`boolean`	`true`	Set to `false` to skip this component and everything inside it.
`label`	`string`	None	The text above the track.
`value`	`number`	None	Where the handle starts. Defaults to halfway between `min` and `max`.
`min`	`number`	`0`	The lowest it goes.
`max`	`number`	`100`	The highest it goes.
`step`	`number`	`1`	How far it moves at a time.
`unit`	`string`	None	What the number is measured in, shown after it.
`name`	`string`	None	The name it submits under. Taken from the label where it is not set.
`required`	`boolean`	`false`	Marks the field as needed, and stars its label.