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>

Examples

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

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

Apply the ngpSlider directive to an element that represents the slider and contains the track, range, and thumb.

• Selector: [ngpSlider]
• Exported As: ngpSlider
• Host Directives: NgpFormControl

Define the selected value. Define the minimum value. Define the maximum value. Define the step value. Define the orientation.

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

Apply the ngpSliderTrack directive to an element that represents the track of the slider.

• Selector: [ngpSliderTrack]
• Exported As: 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

Apply the ngpSliderRange directive to an element that represents the range of the slider.

• Selector: [ngpSliderRange]
• Exported As: 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

Apply the ngpSliderThumb directive to an element that represents the thumb of the slider.

• Selector: [ngpSliderThumb]
• Exported As: ngpSliderThumb
• Host Directives: NgpHover, NgpFocusVisible, NgpPress

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.	-

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.