components slider

components/slider

Import: import { Slider } from "@tundralibs/ui/slider"

Rendered in every variant on the catalogue (deno task build:demos, then demo/index.html). Guides: Getting started · rAPId integration · Theming.

Functions

Slider

Slider(props: SliderProps): Html

CSP-clean: the painted track's position is --slider-pct, which slider.js sets from the input on load and on every input event. No inline style is emitted. Without JS the painted track is hidden by CSS (html:not(.js)) and the native range control shows instead, so the value is never misrepresented.

Types

SliderProps

Prop	Type	Required	Description
id	string	yes
name	string	yes
label	string
min	number
max	number
step	number
value	number
format	(value: number) => string		(v) => "12 workers". Pluralise here, not in the template.
unit	string		Unit word appended to the live value by slider.js as the thumb moves ("workers"), with an optional singular form ("worker"). Without it the script shows the bare number — format only runs server-side.
unitOne	string
scale	string[]		Tick labels under the track; implies the stepped treatment. The live output shows the matching label as the thumb moves.
disabled	boolean

Usage

Each example as the rAPId call and the HTML it renders — the markup a plain page writes by hand. Icons are inline SVG in the real output; they are shortened to <svg …>…</svg> here.

Worker count with a live value

Slider({
  id: "workers",
  name: "workers",
  label: "Concurrency",
  min: 1,
  max: 32,
  value: 8,
  unit: "workers",
  unitOne: "worker",
})

<div class="slider" data-slider data-slider-unit="workers" data-slider-unit-one="worker">
  <div class="slider__head">
    <label class="slider__label" for="workers">Concurrency</label>
    <output class="slider__value" for="workers" data-slider-output>8 workers</output>
  </div>
  <div class="slider__control">
    <input class="slider__input" id="workers" name="workers" type="range" min="1" max="32" step="1" value="8">
    <span class="slider__track"></span>
    <span class="slider__fill"></span>
    <span class="slider__thumb"></span>
  </div>
  <div class="slider__scale">
    <span>1</span>
    <span>32</span>
  </div>
</div>

CSS hooks

Classes defined by components/slider/slider.css — structural, token-driven; override from an unlayered stylesheet (see Theming):

.js, .slider, .slider--range, .slider--stepped, .slider__control, .slider__fill, .slider__head, .slider__input, .slider__label, .slider__scale, .slider__scale-item--active, .slider__thumb, .slider__thumb--from, .slider__thumb--to, .slider__tick, .slider__ticks, .slider__track, .slider__value

Behaviour

components/slider/slider.js ships in ui.js (delegated on document, re-initialised after a rAPId swap).

Attributes it reads or writes: data-slider, data-slider-labels, data-slider-output, data-slider-unit, data-slider-unit-one.

Events: rapid:swapped.