Overview

tng-slider is a range slider that implements ControlValueAccessor. It supports min, max, step, disabled, and klass hooks for track, fill, thumb, and label.

CVA min / max / step Klass hooks Standalone
Reactive Forms

Quick example

Basic
HTMLTSCSS

<form [formGroup]="form">
  <tng-slider formControlName="volume" [min]="0" [max]="100" [step]="1" />
</form>
50

Value: 50

Features

min / max / step

Defaults: 0, 100, 1. Value is clamped to min/max.

Value: number

Form value is a number. Use with formControlName or controlled [value] / (valueChange).

Klass hooks

rootKlass, labelKlass, trackKlass, fillKlass, thumbKlass, rangeKlass for full theming.