DaffSliderComponent

[xelaint]

Feature description

Add a slider component to @daffodil/design for selecting a numeric value (or range) from a continuous or stepped scale by dragging a thumb along a track.

Features needed:

min = input<number>(0);
max = input<number>(100);
step = input<number>(1);
disabled = input<boolean>(false);

// single-value mode
value = model<number>();

// range mode (dual thumb) — opt in via [range]
range = input<boolean>(false);
rangeValue = model<{ start: number; end: number }>();

Accessibility requirements

• Each thumb is a focusable element with role="slider", aria-valuemin, aria-valuemax, aria-valuenow, and aria-valuetext (the latter for formatted values like "$120").
• Full keyboard support: Arrow keys step by step, PageUp/PageDown for larger increments, Home/End jump to min/max.
• In range mode, thumbs must not cross; each thumb's effective min/max is bounded by the other.
• Support an external/visible label via aria-labelledby, and allow projecting a label.
• Honor prefers-reduced-motion for thumb/track transitions.

Use case

Storefronts frequently need bounded numeric input that's faster and more tactile than a text field:

Price range filtering on category/search pages (dual-thumb range)
Single-value attribute selection (e.g. screen size, capacity)
Quantity or intensity controls in configurators

Prior work

No response

Daffodil version

0.93.0

Additional context

No response