Forms

Range

A range slider is used to modify a value by sliding a handle along a track, allowing for precise adjustments.

Basic example

Default

Basic input `range` example.

Size

Range sizes

The Range inputs are stacked in three sizes:extra small `xs`, small `sm`, default, and large `lg`.

Color

Semantic colors

The standard format for range is accompanied by the component class `range` and modifier class `range-{semantic-color}`.

Custom color

Utilize `[--range-color:]` to incorporate your custom color.

Illustrations

Disabled

Apply the `disabled` boolean attribute to a range input to disable pointer events and prevent focusing.

Min and max

Range inputs inherently have default values for `min` and `max` - 0 and 100, respectively. You can customize these values using the `min` and `max` attributes.

Steps

The `step` attribute specifies the interval between legal numbers in an `<input>` element.

| | | | |

Class referenceThe component, style, color, state, size and modifier classes available for this component.

Class	Type	Description
`range`	component	Range input
`range-primary`	color	Adds 'primary' to range
`range-secondary`	color	Adds 'secondary' to range
`range-accent`	color	Adds 'accent' to range
`range-info`	color	Adds 'info' to range
`range-success`	color	Adds 'success' to range
`range-warning`	color	Adds 'warning' to range
`range-error`	color	Adds 'error' to range
`range-xs`	size	Extra small range
`range-sm`	size	Small range
`range-md`	size	Medium (Default) range
`range-lg`	size	Large range
`range-xl`	size	Extra Large range