slider

Fragment reference slider

tags

ui

Ranges allow the user to select a value within a range.

Usage

slider(label="Volume" min=0 max=100 value=50)

Features

Enable range mode or show additional UI elements.

slider(label="Range" range min=0 max=100 min-value=20 max-value=80)
slider(label="Markers" with-markers min=0 max=10 value=5)

Tooltips

Use with-tooltip to show the current value.

slider(label="Quality" with-tooltip min=0 max=100 value=50)

Attributes

Name	Type	Default	Description
label	string	-	Accessible label.
min	number	0	Minimum value.
max	number	100	Maximum value.
value	number	-	Current value.
range	boolean	false	Enables dual-thumb range selection.
min-value	number	0	Minimum value for range mode.
max-value	number	50	Maximum value for range mode.
with-tooltip	boolean	false	Shows a value tooltip.
with-markers	boolean	false	Shows step markers.
size	small | medium | large	medium	Component size.
disabled	boolean	false	Prevents interaction.