Getting StartedInstallation and setup guides 6
FormInput and selection components 26
LayoutWorkflow and structural layout components 10
NavigationMenu surfaces and hierarchical actions 7
OverlayModal and floating layer surfaces 3
FeedbackStatus, empty, progress, and loading placeholder patterns 6
UtilityGeneral-purpose interface utilities 7
Overview API Styling Examples

tng-range-slider

PropertyTypeDetails
value / valueChangeTngRangeSliderValue / outputControlled { min, max } selection updated by either thumb.
lowerBound, upperBoundnumber | undefinedForm-safe outer bounds for both thumbs. Defaults to 0 and 100.
min, maxnumber | undefinedDeprecated standalone aliases. Do not combine them with formField.
stepnumberPositive increment. Defaults to 1.
minGapnumberMinimum permitted distance between the selected endpoints.
minAriaLabel, maxAriaLabelstringDistinct accessible names for the minimum and maximum thumbs.
disabled, invalid, requiredbooleanShared control state integrated with tng-form-field and Signal Forms.

Bounds

Use lowerBound and upperBound for the control domain. The selected value continues to use min and max endpoint properties.

Angular Signal Forms

Signal Forms reserves min and max bindings. The range-specific bound names can be bound safely on the same element as formField.

Signal Forms binding

html
<tng-range-slider
  [formField]="filtersForm.priceRange"
  [lowerBound]="0"
  [upperBound]="100"
  [step]="5"
  minAriaLabel="Minimum price"
  maxAriaLabel="Maximum price"
/>