Slider

Select a value within a range.

Import

Import the Slider primitives from ng-primitives/slider.

import { NgpSlider, NgpSliderTrack, NgpSliderRange, NgpSliderThumb } from 'ng-primitives/slider';

Usage

Assemble the slider directives in your template.

<div ngpSlider>
  <div ngpSliderTrack>
    <div ngpSliderRange></div>
  </div>
  <div ngpSliderThumb></div>
</div>

Reusable Component

Create a reusable component that uses the slider directives.

Schematics

Generate a reusable slider component using the Angular CLI.

ng g ng-primitives:primitive slider

Options

• path: The path at which to create the component file.
• prefix: The prefix to apply to the generated component selector.
• componentSuffix: The suffix to apply to the generated component class name.
• fileSuffix: The suffix to apply to the generated component file name. Defaults to component.
• exampleStyles: Whether to include example styles in the generated component file. Defaults to true.

Examples

Here are some additional examples of how to use the Slider primitives.

Vertical Slider

Display the slider in a vertical orientation by setting ngpSliderOrientation="vertical".

Slider Thumb Tooltip

Display the current value in a tooltip that follows the slider thumb. Use ngpTooltipTriggerTrackPosition to enable smooth position updates during drag.

Slider Track Tooltip

Display a preview tooltip as you hover over the track, showing what value would be selected at that position. The tooltip also appears on the thumb during drag. Uses ngpTooltipTriggerPosition for programmatic positioning.

Slider Form Field

The slider automatically integrates with the form field primitives.

API Reference

The following directives are available to import from the ng-primitives/slider package:

NgpSlider

Data Attributes

The following data attributes are available to style the slider:

Attribute	Description	Value
data-disabled	Applied when the slider is disabled.	-
data-orientation	The orientation of the slider.	horizontal | vertical

NgpSliderTrack

Data Attributes

The following data attributes are available to style the slider track:

Attribute	Description	Value
data-disabled	Applied when the slider is disabled.	-
data-orientation	The orientation of the slider.	horizontal | vertical

NgpSliderRange

Data Attributes

The following data attributes are available to style the slider range:

Attribute	Description	Value
data-disabled	Applied when the slider is disabled.	-
data-orientation	The orientation of the slider.	horizontal | vertical

NgpSliderThumb

Data Attributes

The following data attributes are available to style the thumb:

Attribute	Description	Value
data-orientation	The orientation of the slider.	horizontal | vertical
data-disabled	Applied when the slider is disabled.	-
data-hover	Applied when the slider thumb is hovered.	-
data-focus-visible	Applied when the slider thumb is focused.	-
data-press	Applied when the slider thumb is pressed.	-

API Reference

The following directives are available to import from the ng-primitives/slider package:

Accessibility

Adheres to the Slider WAI-ARIA design pattern.

Keyboard Interactions

• Left Arrow or Down Arrow: Decrease the value by the step.
• Right Arrow or Up Arrow: Increase the value by the step.
• Left Arrow or Down Arrow + Shift: Decrease the value by the step by a larger amount.
• Right Arrow or Up Arrow + Shift: Increase the value by the step by a larger amount.
• Home: Set the value to the minimum.
• End: Set the value to the maximum.