Forms

Stable - @kikita-labs/ui v1.6.1

Slider

kuiSlider applies Kikita UI slider styling and behavior to native range inputs.

Import

Import the public directive from the published package entrypoint.

slider.ts
import { KuiSliderDirective } from '@kikita-labs/ui';

Usage

Open in Playground

Use native range input semantics first. Prefer a wrapping kui-field for visible labels and helper text instead of hand-written labels or description ids.

Use arrow keys, Home, and End.

<div class="basic-slider-example">
  <kui-field label="Volume" hint="Use arrow keys, Home, and End.">
    <input type="range" kuiSlider min="0" max="100" value="60" />
  </kui-field>

  <input
    type="range"
    kuiSlider
    color="success"
    size="lg"
    min="0"
    max="100"
    value="40"
    minLabel="0"
    maxLabel="100"
    aria-label="Progress"
  />
</div>

Min, max, and step

min, max, step, and value are native range attributes. kuiSlider reads them directly to size the fill and thumb.

min 0.5, max 2, step 0.25

min 1, max 5, step 1

<div class="slider-range-example">
  <kui-field label="Playback speed" hint="min 0.5, max 2, step 0.25">
    <input
      type="range"
      kuiSlider
      min="0.5"
      max="2"
      step="0.25"
      value="1"
      minLabel="0.5x"
      maxLabel="2x"
    />
  </kui-field>

  <kui-field label="Rating" hint="min 1, max 5, step 1">
    <input type="range" kuiSlider min="1" max="5" step="1" value="3" minLabel="1" maxLabel="5" />
  </kui-field>
</div>

Disabled and invalid

disabled mirrors native disabled styling. invalid applies invalid styling outside a kui-field error state.

Disabled until a plan is selected.

<div class="slider-disabled-example">
  <kui-field label="Storage limit" hint="Disabled until a plan is selected.">
    <input type="range" kuiSlider min="0" max="100" value="25" disabled />
  </kui-field>

  <input type="range" kuiSlider min="0" max="100" value="70" invalid aria-label="Invalid slider" />
</div>

Signal Forms

Use Angular Signal Forms formField on the same native range input. Angular owns the native value, disabled, and validation state; kuiSlider keeps the generated visuals in sync. Use the min(...) and max(...) schema validators instead of native min/max attributes when formField is bound.

Signal Forms native range binding

<div class="slider-field-example">
  <kui-field label="Volume" hint="Signal Forms native range binding">
    <input type="range" kuiSlider [formField]="settingsForm.volume" />
  </kui-field>
</div>

API

Inputs verified against @kikita-labs/ui v1.6.1 public typings.

NameTypeDefaultDescription
kuiSliderdirective — Selector input[type=range][kuiSlider]. Applies Kikita UI slider styling and behavior to a native range input.
color'primary' | 'success' | 'danger' | 'neutral''primary'Semantic color applied to the generated slider fill and thumb.
size'sm' | 'md' | 'lg''md'Visual size of the generated slider control.
minLabelstring''Optional label rendered below the minimum side of the track.
maxLabelstring''Optional label rendered below the maximum side of the track.
disabledbooleanfalseMirrors disabled styling on the generated slider wrapper.
invalidbooleanfalseApplies invalid styling outside a kui-field error state.
idstring | undefined — Explicit native input id. Falls back to the parent kui-field control id.
min / max / step / valuenative attributes — Native range input attributes. kuiSlider reads them directly; use them (or Signal Forms min/max validators) instead of a directive input.
kuiTooltipstring — When set to a non-empty string on the same host, the static tooltip text wins over the default value tooltip. Otherwise kuiSlider shows the current numeric value in a tooltip on hover.
[formField]FieldTree<number> (from @angular/forms/signals) — Angular Signal Forms binding. Owns native value, disabled, and validation state; kuiSlider keeps the generated track and thumb visuals in sync. Do not add native min/max alongside formField; use the min(...) and max(...) schema validators instead.

Accessibility

Slider keeps native range input semantics instead of replacing them with ARIA roles.

  • Use a visible label through kui-field or a native label; otherwise provide aria-label.
  • Arrow keys, Home, and End are native range input keyboard behavior and are preserved.
  • When projected inside kui-field, kuiSlider inherits the field id, aria-describedby, and aria-invalid.
  • Use invalid only when the slider is outside field error wiring.
  • The default hover tooltip shows the current numeric value; a non-empty kuiTooltip on the same host overrides it with static text.