KikitaUiDocs

import { KuiSlider } from '@kikita-labs/ui';

Volume

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>

Playback speed

min 0.5, max 2, step 0.25

Rating

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>

Storage limit

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>

Volume

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>

import { provideKikitaUi } from '@kikita-labs/ui';

export const appConfig: ApplicationConfig = {
  providers: [
    provideKikitaUi({
      defaults: {
        slider: {
          /* options below */
        },
      },
    }),
  ],
};

Name	Type	Default	Description
size	`'sm' \| 'md' \| 'lg'`	—	Component size. Takes precedence over the global defaults.size.
color	`'primary' \| 'success' \| 'danger' \| 'neutral'`	—	Default colour role.

Name	Type	Default	Description
--kui-slider-fill-bg	`CSS custom property`	`--kui-color-primary-indicator`	Fill background
--kui-slider-fill-bg-primary	`CSS custom property`	`--kui-color-primary-indicator`	Fill background, primary
--kui-slider-fill-bg-success	`CSS custom property`	`--kui-color-success-indicator`	Fill background, success
--kui-slider-fill-bg-danger	`CSS custom property`	`--kui-color-danger-indicator`	Fill background, danger
--kui-slider-fill-bg-neutral	`CSS custom property`	`--kui-color-text-secondary`	Fill background, neutral
--kui-slider-fill-bg-invalid	`CSS custom property`	`--kui-color-danger-indicator`	Fill background, invalid
--kui-slider-thumb-bg	`CSS custom property`	`--kui-color-primary-indicator`	Thumb background
--kui-slider-thumb-bg-primary	`CSS custom property`	`--kui-color-primary-indicator`	Thumb background, primary
--kui-slider-thumb-bg-success	`CSS custom property`	`--kui-color-success-indicator`	Thumb background, success
--kui-slider-thumb-bg-danger	`CSS custom property`	`--kui-color-danger-indicator`	Thumb background, danger
--kui-slider-thumb-bg-neutral	`CSS custom property`	`--kui-color-text-secondary`	Thumb background, neutral
--kui-slider-thumb-bg-invalid	`CSS custom property`	`--kui-color-danger-indicator`	Thumb background, invalid
--kui-slider-thumb-focus-ring-color	`CSS custom property`	`--kui-color-focus`	Thumb focus outline color
--kui-slider-track-bg-disabled	`CSS custom property`	`--kui-color-surface-elevated`	Track background, disabled
--kui-slider-fill-bg-disabled	`CSS custom property`	`--kui-color-text-disabled`	Fill background, disabled
--kui-slider-thumb-bg-disabled	`CSS custom property`	`--kui-color-text-disabled`	Thumb background, disabled
--kui-slider-tooltip-bg	`CSS custom property`	`--kui-color-text`	Tooltip background
--kui-slider-tooltip-color	`CSS custom property`	`--kui-color-bg`	Tooltip color
--kui-slider-tooltip-arrow-color	`CSS custom property`	`--kui-color-text`	Tooltip arrow color
--kui-slider-labels-color	`CSS custom property`	`--kui-color-text-secondary`	Labels color

Name	Type	Default	Description
--kui-slider-tooltip-text-font-size	`CSS custom property`	`--kui-text-xs-size`	Tooltip text font size
--kui-slider-labels-font-size	`CSS custom property`	`--kui-text-xs-size`	Labels font size
--kui-slider-thumb-size	`CSS custom property`	`18px (sm 14px, lg 22px)`	Thumb diameter; sets the track inset and the block padding
--kui-slider-thumb-size-active	`CSS custom property`	`thumb size + 4px`	Thumb diameter while pressed
--kui-slider-track-size	`CSS custom property`	`4px (sm 2px, lg 6px)`	Track thickness
--kui-slider-thumb-shadow	`CSS custom property`	`none`	Thumb shadow at rest
--kui-slider-thumb-shadow-hover	`CSS custom property`	`halo and 1px 3px black 30%`	Thumb shadow on hover
--kui-slider-thumb-shadow-focus	`CSS custom property`	`1px 2px black 30%`	Thumb shadow on keyboard focus
--kui-slider-thumb-shadow-active	`CSS custom property`	`2px 8px black 50% and halo`	Thumb shadow while pressed

Name	Type	Default	Description
kuiSlider	`directive`	—	Selector input[type=range][kuiSlider]. Applies Kikita UI slider styling and behavior to a native range input.
color	`'primary' \| 'success' \| 'danger' \| 'neutral' \| undefined`	`undefined`	Semantic color applied to the generated slider fill and thumb.
size	`'sm' \| 'md' \| 'lg' \| undefined`	`undefined`	Visual size of the generated slider control.
minLabel	`string`	`''`	Optional label rendered below the minimum side of the track.
maxLabel	`string`	`''`	Optional label rendered below the maximum side of the track.
disabled	`boolean`	`false`	Mirrors disabled styling on the generated slider wrapper.
invalid	`boolean`	`false`	Applies invalid styling outside a kui-field error state.
id	`string \| undefined`	—	Explicit native input id. Falls back to the parent kui-field control id.
min / max / step / value	`native attributes`	—	Native range input attributes. kuiSlider reads them directly; use them (or Signal Forms min/max validators) instead of a directive input.
kuiTooltip	`string`	—	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.
KuiSliderOptions	`interface`	`-`	Shape of defaults.slider: size and color.

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 tooltip shows the current numeric value on hover, and also on keyboard focus and while adjusting with the keyboard, so arrow-key users see what they set. It is hoverable and Escape dismisses it (WCAG 1.4.13). A non-empty kuiTooltip on the same host overrides it with static text.
Disabled sliders get native disabled semantics, and the track, fill and thumb stay visible under forced-colors: active.

The directive class is KuiSlider; the Directive suffix is gone.
Size and colour defaults moved to provideKuiDefaults({ slider: { size, color } }); the inputs are now undefined until set.
The value tooltip also shows on keyboard focus and while adjusting with the keyboard, and Escape dismisses it.
Every colour part has a token, and the thumb and track have size tokens (--kui-slider-thumb-size, --kui-slider-track-size) and shadow tokens.
A required kui-field sets aria-required, and the slider is covered by forced-colors.

Slider

Import

Usage

Min, max, and step

Disabled and invalid

Signal Forms

Provider defaults

Theming tokens

API

Accessibility

Migrating to 2.0