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

NgpRangeSliderTrack

NgpRangeSliderRange

NgpRangeSliderThumb

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