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

Styling contract

Style <tng-number-range> through the host-level token contract. Set --tng-number-range-* overrides on the host element or a scoped parent class and avoid reaching into internal DOM selectors for routine visual changes.

CSS contracts

These selectors are the public styling surface. Internal slots follow the BEM-style class contract used in the component template and are safe to target for fine-grained overrides.

Public selectors

css
tng-number-range
.tng-number-range
.tng-number-range__input
.tng-number-range__input--min
.tng-number-range__input--max
.tng-number-range__separator

Shell state hooks

Invalid, disabled, and readonly styling should use the emitted state attributes rather than custom class bookkeeping or input event listeners.

State hooks

css
.my-range-host {
  --tng-number-range-border: #cbd5e1;
  --tng-number-range-focus-ring: rgba(59, 130, 246, 0.2);
}

.my-range-host .tng-number-range[data-invalid] {
  border-color: #ef4444;
}

.my-range-host .tng-number-range[data-disabled] {
  opacity: 0.58;
  cursor: not-allowed;
}

Theme contract tokens

All visual properties fall back to semantic tokens so they automatically track the active theme and light/dark mode. Override any token on the host or a scoped wrapper.

Public number-range tokens

css
--tng-number-range-bg
--tng-number-range-border
--tng-number-range-fg
--tng-number-range-placeholder
--tng-number-range-radius
--tng-number-range-min-height
--tng-number-range-px
--tng-number-range-gap
--tng-number-range-focus-ring
--tng-number-range-invalid-border
--tng-number-range-separator-color

User scenario style examples

Filter panel styling with the component token contract in plain CSS and Tailwind CSS.

Price range filter

Different styling pattern examples

Theme token override

Override the public token surface on the host to change the visual character without touching internal DOM.

Theme token override

css
.my-price-range-host {
  --tng-number-range-bg: #ffffff;
  --tng-number-range-border: #cbd5e1;
  --tng-number-range-radius: 0.75rem;
  --tng-number-range-min-height: 2.5rem;
  --tng-number-range-px: 0.8rem;
  --tng-number-range-gap: 0.5rem;
  --tng-number-range-focus-ring: rgba(59, 130, 246, 0.2);
  --tng-number-range-separator-color: #94a3b8;
}

Density control

Tune field density through the token surface instead of replacing the shell layout.

Density control

css
.my-compact-range-host {
  --tng-number-range-min-height: 2rem;
  --tng-number-range-px: 0.6rem;
  --tng-number-range-gap: 0.25rem;
  --tng-number-range-radius: 0.5rem;
}

State-aware container

Use the emitted state attributes when the visual treatment must react to invalid or disabled state.

State-aware container

css
.my-range-host {
  --tng-number-range-border: #cbd5e1;
  --tng-number-range-focus-ring: rgba(59, 130, 246, 0.2);
}

.my-range-host .tng-number-range[data-invalid] {
  border-color: #ef4444;
}

.my-range-host .tng-number-range[data-disabled] {
  opacity: 0.58;
  cursor: not-allowed;
}