Slider

A slider built on an enhanced native <input type="range">.

Basic Usage

Basic usage

Example

Range & Step

min / max / step

Example

Disabled

Disabled

Example

Marks (object)

Marks object: value → label map

Example

Marks (array)

Marks array: values only, labels fall back to the numeric text

Example

While dragging, tick marks and labels reached by the current value are highlighted with the theme color. marks supports both a JSON object {"值":"标签"} and a JSON array [值, 值] (array elements may also be {"value": 26, "label": "26°C"}).

Events

Live value & change events

Example

oas-input fires while dragging, oas-change fires on release; both detail.value are numbers:

API

Attributes

Attribute	Description	Type	Default
disabled	Disabled	boolean	—
marks	Ticks: JSON object {"0":"0°C"} (value→label) or JSON array [0,26,60] (also {"value":26,"label":"26°C"}); tick marks and labels are shown below the track, highlighted where the value passes	string | Record<string, string | number> | number[]	—
max	Range	string	100
min	Range	string	0
step	Step	string	1
value	Current value (controlled)	string	—

Events

Event	Description
oas-change	Committed on release, detail: { value }
oas-input	While dragging, detail: { value }