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

Supported contract

Theme the slider component from its host. Keep labels, marks, and value badges in your surrounding shell.

Selector or tokenApplied onPurpose
tng-sliderWrapper hostOwn layout width and component-level semantic tokens.
[data-disabled]Wrapper root and primitive inputStyle disabled state without depending on component internals.
--tng-slider-range-colorWrapper host or ancestorSets the selected portion of the track.
--tng-slider-track-colorWrapper host or ancestorSets the unselected track color.
--tng-slider-thumb-color, --tng-slider-thumb-border-colorWrapper host or ancestorSets the pointer surface and border colors.
--tng-slider-track-size, --tng-slider-thumb-sizeWrapper host or ancestorAdjusts the shared track and pointer dimensions.

Host tokens

The slider exposes public track, selected-range, pointer, focus, and sizing tokens.

slider.tokens.css

css
tng-slider.docs-component-slider-styling-brand-shell {
  --tng-slider-range-color: #0f766e;
  --tng-slider-thumb-border-color: #0f766e;
  --tng-slider-track-size: 0.5rem;
  --tng-slider-thumb-size: 1.25rem;
  --tng-disabled-opacity: 0.5;
}

/* Keep layout, labels, marks, and summaries in your shell. */
.settings-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 4rem;
  gap: 1rem;
}

Settings density shell

The slider contract stays the same while the host token and surrounding marks change the presentation.

Settings density shell (Plain-CSS)

Panel density

Host tokens change the slider accent while labels and marks stay in the outer shell.

55%