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

Imports

Component import

ts
import {
  TngRangeSliderComponent,
  type TngRangeSliderValue,
} from '@tailng-ui/components';

Basic usage

Controlled price range

Choose either a plain CSS shell or a Tailwind utility shell around the same controlled range-slider contract.

Controlled price range (Plain CSS)

Price range Minimum price Maximum price
Minimum: $20Maximum: $75

Value model

The component exposes one typed { min, max } value. Bounds describe the control's permitted domain; they are separate from the selected endpoints.

Behavior baseline

  • Both thumbs stay ordered and aligned to the configured step.
  • minGap maintains the required separation between endpoints.
  • Each thumb receives its own accessible label and value text.