Slider

The Slider component (ui:slider) renders a panel of range sliders for adjusting multiple parameters simultaneously.

Examples

View Glyph Markdown source

```ui:slider
title: Configure preferences
parameters:
  - id: performance
    label: Performance
    min: 0
    max: 100
    step: 5
    value: 50
    unit: "%"
  - id: cost
    label: Budget
    min: 0
    max: 10000
    step: 100
    unit: "$"
```

Single parameter

Properties

Property	Type	Required	Default	Description
title	string	No	—	Optional heading.
layout	"vertical" | "horizontal"	No	"vertical"	Layout direction.
parameters	SliderParameter[]	Yes	—	Parameters to adjust (min 1).
markdown	boolean	No	false	Enable inline markdown formatting (bold, italic, links, code) in text fields.

SliderParameter

Property	Type	Required	Default	Description
id	string	Yes	—	Unique parameter identifier.
label	string	Yes	—	Display label.
min	number	No	0	Minimum value.
max	number	No	100	Maximum value.
step	number	No	1	Step increment.
value	number	No	min	Initial value.
unit	string	No	—	Unit suffix (e.g., ”%”, ”$”).

Markdown Support

Enable inline markdown formatting in parameter labels:

View Glyph Markdown source

```ui:slider
title: Configure preferences
parameters:
  - id: performance
    label: "**Performance** Level"
    min: 0
    max: 100
    step: 5
    value: 50
    unit: "%"
  - id: cost
    label: "*Maximum* Budget"
    min: 0
    max: 10000
    step: 100
    unit: "$"
  - id: quality
    label: "`quality_score` Rating"
    min: 1
    max: 10
    step: 1
    value: 7
markdown: true
```

Supported formatting: bold, italic, code, links

Learn more about markdown in components →

Interaction events

Event kind: slider-change

Payload field	Type	Description
parameterId	string	ID of the changed parameter.
parameterLabel	string	Label of the changed parameter.
value	number	The new value.
allValues	Array<{ id, label, value }>	Full state snapshot.

Accessibility

• Uses native <input type="range"> with aria-valuemin, aria-valuemax, aria-valuenow, and aria-valuetext.
• Arrow keys adjust by step, Home/End for min/max.