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	The disabled state of the slider.	true | false
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	The disabled state of the slider.	true | false
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	The disabled state of the slider.	true | false
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	The disabled state of the slider.	true | false
data-hover	The hover state of the slider thumb.	true | false
data-focus-visible	The focus state of the slider thumb.	true | false
data-press	The pressed state of the slider thumb.	true | false

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.