Range Slider

Select a range of values within a defined range.

Import

Import the Range Slider primitives from ng-primitives/slider.

import {
  NgpRangeSlider,
  NgpRangeSliderTrack,
  NgpRangeSliderRange,
  NgpRangeSliderThumb,
} from 'ng-primitives/slider';

Usage

Assemble the range slider directives in your template.

<div ngpRangeSlider>
  <div ngpRangeSliderTrack>
    <div ngpRangeSliderRange></div>
  </div>
  <div ngpRangeSliderThumb></div>
  <div ngpRangeSliderThumb></div>
</div>

Examples

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

Vertical Range Slider

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

API Reference

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

NgpRangeSlider

Data Attributes

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

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

NgpRangeSliderTrack

Data Attributes

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

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

NgpRangeSliderRange

Data Attributes

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

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

NgpRangeSliderThumb

Data Attributes

The following data attributes are available to style the thumb:

Attribute	Description	Value
data-orientation	The orientation of the range slider.	horizontal | vertical
data-disabled	Applied when the range 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.	-
data-thumb	Indicates which value this thumb controls.	low | high

Accessibility

Adheres to the Multi-Thumb Slider WAI-ARIA design pattern.

Keyboard Interactions

Each thumb can be focused and controlled independently:

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

Mouse Interactions

• Clicking on the track moves the closest thumb to that position.
• Dragging a thumb updates its corresponding value while respecting the boundaries (low ≤ high).