Forms

Slider

Pick a value on a scale with ticks. Drag, click or use the keyboard, and it snaps to the tick.

data-u="slider"

Example

<div data-u="slider" data-u-props='{
  "min": 0,
  "max": 4,
  "value": 1,
  "label": "Effort",
  "left": "Faster",
  "right": "Smarter",
  "texts": ["Minimum", "Low", "Medium", "High", "Maximum"]
}'></div>

Installation

Slider ships in the full package, in unslop.css and unslop.js:

curl -fsSL unslop.leallabs.dev/i | sh

A ready-made block that uses slider:

curl -fsSL unslop.leallabs.dev/i | sh -s add wall-models

No build Name-based add is for charts and blocks. Components with JS live in unslop.js, which mounts every data-u on the page by itself.

Props

They go in data-u-props, as JSON.

Prop	Type	Default	What it does
`min`	number	0	Lowest value.
`max`	number	4	Highest value.
`step`	number	1	Step between ticks. Each step gets a tick on the track.
`value`	number	min	Initial value.
`label`	string	no default	Name of the track (`aria-label`).
`left`	string	no default	Text at the left end.
`right`	string	no default	Text at the right end.
`texts`	array	no default	One text per position. It becomes the `aria-valuetext` and goes in the event.

Accessibility and keyboard

State and roles

Where	Attribute	What it says
track	`role="slider"`, `tabindex="0"`	The track takes focus.
track	`aria-valuemin`, `aria-valuemax`, `aria-valuenow`	Bounds and current value.
track	`aria-valuetext`	The position text (from texts) or the number.

Keyboard

Key	Does
Right or up arrow	goes up one step
Left or down arrow	goes down one step
Home	goes to the minimum
End	goes to the maximum

Events and API

Event	detail	When
`u:change`	`{ value, text }`	When the value changes, by drag, click or keyboard.

Every event bubbles up the page. Listen on the element itself: el.addEventListener("u:change", (e) => e.detail).

el._u.value reads the current value.