Skip to main content
Urbicon UI
source

Slider

Numeric slider with single and range modes, step snapping, tick marks, and touch support.

Volume 65
Loading syntax highlighting...

01 Examples

Range Mode

Two thumbs for selecting a numeric range — bind to a `[min, max]` tuple.
Price range $100 – $400
Loading syntax highlighting...

With Marks

Labelled tick marks for key values along the track. `step` snaps the thumb to whole increments.
Temperature 22°C
16°20°24°28°30°
Loading syntax highlighting...

Valid & Recommended Range

Three-zone track for domain-specific constraints. validRange is the hard limit (red on violation), recommendedRange the UX recommendation (green), with a warning zone (yellow) in between.
Consumption-based share of heating costs 70 %
Billing-regulation standard (recommended)
Hot water temperature 60 °C
Legionella protection satisfied
Payback period 15 years
Economically viable corridor
Loading syntax highlighting...

Helper & Error

Group-level helper and error text follow the same form-field contract as Input — `error` overrides `helper` when both are set.
Brightness 80%
Adjust screen brightness
Budget $0
Loading syntax highlighting...

02 Customization

Volume Control

Slider in a realistic media player context.
🔈
🔊

65%

Loading syntax highlighting...

Price Filter

Range slider for filtering products by price.
Price Range $100 – $400
Loading syntax highlighting...

03 Accessibility

ARIA Slider

Each thumb uses role="slider" with aria-valuemin, aria-valuemax, aria-valuenow, and aria-label. In range mode, thumbs are labelled "minimum" and "maximum" for clear identification.

Keyboard

Arrow Right/Up increases by step, Arrow Left/Down decreases. Page Up/Down moves by 10x step. Home/End jump to min/max.

Touch Support

Uses Pointer Events for unified mouse, touch, and pen support. The touch-none CSS property prevents browser scroll interference during thumb dragging.

Focus & Color

Focus rings use focus-visible: for keyboard-only visibility. Intent colors are paired with shape (filled track vs. outlined thumb) so the control remains usable without color perception.

04 API Reference

29 props
29 props

No matching properties

No matching properties

05 Installation

Import

Loading syntax highlighting...
llm.txt