Range

Native <input type="range"> with both track and thumb repainted across ::-webkit-slider-runnable-track, ::-moz-range-track, ::-webkit-slider-thumb, and ::-moz-range-thumb. Each vendor pseudo lives in its own rule block (mixing pseudos in one selector list makes browsers that don't recognise the other drop the whole rule).

Live

Default (0–100, value 50)

<input type="range" min="0" max="100" value="50" />
@use '@adnap/krysalicss' with (
  $feature-list: ('base-reset', 'base-global', 'element-range')
);
Playground

Markup

markup
<input type="range" min="0" max="100" value="50" />

When to use

  • Continuous numeric input where the exact value is less important than the relative position (volume, brightness, opacity).
  • For exact-number input prefer Text input with type="number".
  • Display the live value next to the slider; the framework styles the control but does not auto-show its value.

Variables

VariableDefaultNotes
$selector'input[type="range"]'Attribute selector. selector.append() distributes vendor pseudos so consumer rescopes stay valid.
$track-height0.375remTrack stripe thickness.
$track-radius$global-max-border-radius (999px)Track corner radius (renders as full pill).
$track-mix18%Track fill: color-mix(in srgb, currentColor 18%, transparent). Low enough to read as a passive groove, high enough to show against the page bg.
$thumb-size1.125remCircle diameter. Drives the input's height so the thumb defines the row height.
$thumb-border-width2pxHalo around the thumb. Thicker than the global 1px because the thumb sits over the track stripe; at 1px the boundary collapses against --kc-fg-mixed tints.
$focus-outline-width$global-focus-outline-width (2px)Focus-visible ring width.
$focus-outline-style$global-focus-outline-style (solid)Focus ring style.
$focus-outline-offset$global-focus-outline-offset (2px)Gap between control and ring.
$disabled-opacity$global-disabled-opacity (0.6)Applied via plain rule (no shared mixin) so the cursor swap is colocated.

Override example

app.scss
@use '@adnap/krysalicss/element/range' with (
  $track-height: 0.5rem,
  $thumb-size: 1.25rem,
  $track-mix: 25%,
);

Tokens consumed

TokenUsed for
--kc-fgThumb fill (highest available contrast against any theme bg) and focus-ring fallback.
--kc-bgThumb halo so the thumb reads as a circle on top of the track stripe.
--kc-focus-ringPainted on :focus-visible. Falls back to --kc-fg then currentColor.

Accessibility

  • Anchored on native <input type="range">: keyboard nudging (Left / Right, Home / End, PageUp / PageDown) and AT value announcement ship for free.
  • Always pair with a <label> (visible or aria-labelledby). Display the current value alongside the slider so users don't rely on memory.
  • Focus ring uses --kc-focus-ring with a fallback chain into --kc-fg / currentColor.
  • The 1.125rem thumb is below the WCAG 2.5.5 (44 × 44 px) touch-target floor. Provide adequate vertical padding around the slider or pair with numeric input for keyboard-and-mouse contexts.
  • Forced-colors mode remaps the track to ButtonFace + CanvasText border and the thumb to Highlight / HighlightText so the control still reads under Windows High Contrast.

See also

  • Text input — pair with type="number" for keyboard-precise entry alongside the slider.
  • Forms overview — full form-control roster.
  • Field wrapper — pairs every form control with label + help text.