TailNG - Signal first Angular UI components

Overview API Styling Examples

Imports

import { TngSliderComponent } from '@tailng-ui/components';

Basic usage

<tng-slider
  [value]="volume()"
  (valueChange)="volume.set($event)"
  [min]="0"
  [max]="100"
  [step]="1"
  aria-label="Volume"
></tng-slider>

Slider variants

The wrapper keeps numeric state controlled while the surrounding shell carries labels and summaries.

Volume slider (Plain-CSS)

Volume

Controlled value with a compact summary beside the slider.

42%

Behavior baseline

The wrapper exposes a controlled numeric model through value and valueChange.
min, max, and step are forwarded to the native range input.