Input Range

Formats the value readout and `aria-valuetext`: a function or `Intl.NumberFormat` options. A value that lands on a labelled mark shows the mark's label instead.

Text label shown inside the fader row (start side) or before the track. Also names the input for assistive tech (`aria-label`) unless you pass your own `aria-label`/`aria-labelledby`.

Bindable current value (single mode).

Visual treatment of the track and thumb. `continuous` is the default smooth slider; `stepped` renders a wider pill thumb, emphasises tick dots, and defaults `snap` on for the segmented look.

Surface background token applied to the root wrapper.

Border style inherited from the panel token set.

Semantic feedback color scheme that tints the fill and handle. One of `neutral`, `primary`, `success` (green), `danger` (red), or `warning` (orange).

Tick marks along the track. `true` auto-generates evenly-spaced marks from `step`; an array places explicit (optionally labelled) marks.

Where the single-thumb fill originates: `"start"` (default), `"center"` (for signed ranges), or a specific value.

Show a value tooltip above the thumb. `true`/`"hover"` reveal it while pointing anywhere on the row or while focused; `"active"` only while dragging or keyboard-adjusting the thumb; `"thumb"` also while the pointer hovers the thumb itself; `"always"` keeps it visible.

Size variant that scales the track height and thumb diameter together. One of `xs`, `sm`, `md`, or `lg`.

Shows a CSS color in the handle — e.g. the color the slider currently selects. The fader keeps its handle bar, with the color filling its centre inside a rim of the bar color; the track variant fills the round thumb inside a white ring.

The handle's own color over a painted track (`trackPaint`) — the fader's bar and the rim around a `thumbColor` swatch. Pick one that contrasts with the paint under the handle (dark on light paint, white on dark). Without it, a painted track's handle is white with a thin dark edge, which reads over any paint.

Paints the track with any CSS `<image>` or color — e.g. a `linear-gradient(to right, …)` for a color-channel slider. Comma-separated layers are allowed (a gradient over a checkerboard). A painted track draws no fill: the paint *is* the track. The paint is drawn as given (physical left-to-right), so under RTL pass a `to left` gradient.

Visual treatment. `fader` is a full control-height row whose fill grows to a thin handle bar, with the `label` and a live value readout inside the row — sized like `Input`/`Button` so it lines up in forms. `track` is the classic thin rail with a round thumb.

Stretch the root to fill its container.

Where the label and value go. Track variant: `fieldPrefix`/`fieldSuffix` `inline` beside the rail, or stacked `top`/`bottom`. Fader: `inline` puts them in segments inside the row; `top`/`bottom` turn them into a header line above/below a full-width track, so a stack of faders lines up.

Minimum distance (in value units) kept between the two thumbs in dual mode.

Selection mode. `single` is one thumb (drive with `value`); `dual` is a two-thumb interval (drive with `valueStart`/`valueEnd`). Inferred as `dual` when either dual value is provided.

Snap the value to the nearest mark on input. Requires `marks`. Defaults on when `appearance="stepped"`.

Upper-bound value of a dual-thumb range. Providing this (or `valueStart`) switches the component to dual mode.

Lower-bound value of a dual-thumb range. Providing this (or `valueEnd`) switches the component to dual mode.

Content rendered before the track (a label or readout).

Content rendered after the track (a label or readout).

Whether a prefix label/readout slot is present, used to lay out the track row accordingly.

Whether a suffix label/readout slot is present, used to lay out the track row accordingly.

Bound reference to the inner `<input type="range">` element (`bind:this`).

Per-slot style and attribute override bag, letting consumers customize any slot of the input-range.

Astro / vanilla: serialize the props into `data-input-range-config` so the client runtime hydrates this instance and `getPindoba(el, "input-range")` can `update()` it. Astro sets it on every instance (a range is interactive by nature). Frameworks with their own reactivity don't need it.