Range Slider

Select a range of values within a defined range.

import { Component, signal } from "@angular/core";
import {
  NgpRangeSlider,
  NgpRangeSliderRange,
  NgpRangeSliderThumb,
  NgpRangeSliderTrack,
} from "ng-primitives/slider";

@Component({
  selector: "app-range-slider",
  imports: [
    NgpRangeSlider,
    NgpRangeSliderRange,
    NgpRangeSliderThumb,
    NgpRangeSliderTrack,
  ],
  styles: `
    [ngpRangeSlider] {
      display: flex;
      position: relative;
      width: 200px;
      height: 20px;
      touch-action: none;
      user-select: none;
      align-items: center;
    }

    [ngpRangeSliderTrack] {
      position: relative;
      height: 5px;
      width: 100%;
      border-radius: 999px;
      background-color: var(--ngp-background-secondary);
    }

    [ngpRangeSliderRange] {
      position: absolute;
      height: 100%;
      border-radius: 999px;
      background-color: var(--ngp-background-inverse);
    }

    [ngpRangeSliderThumb] {
      position: absolute;
      display: block;
      height: 20px;
      width: 20px;
      border-radius: 10px;
      background-color: white;
      box-shadow: var(--ngp-button-shadow);
      outline: none;
      transform: translateX(-50%);
      z-index: 1;
    }

    [ngpRangeSliderThumb][data-focus-visible] {
      outline: 2px solid var(--ngp-focus-ring);
      outline-offset: 0;
    }

    [ngpRangeSliderThumb][data-thumb="high"] {
      z-index: 2;
    }
  `,
  template: `
    <div
      [ngpRangeSliderLow]="low()"
      [ngpRangeSliderHigh]="high()"
      (ngpRangeSliderLowChange)="low.set($event)"
      (ngpRangeSliderHighChange)="high.set($event)"
      ngpRangeSlider
    >
      <div ngpRangeSliderTrack>
        <div ngpRangeSliderRange></div>
      </div>
      <div ngpRangeSliderThumb></div>
      <div ngpRangeSliderThumb></div>
    </div>
  `,
})
export default class RangeSliderExample {
  low = signal(25);
  high = signal(75);
}

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>

API Reference

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

NgpRangeSlider

Apply the `ngpRangeSlider` directive to an element that represents the range slider and contains the track, range, and thumbs.

• Selector: [ngpRangeSlider]
• Exported As: ngpRangeSlider

Data Attributes

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

NgpRangeSliderTrack

Apply the `ngpRangeSliderTrack` directive to an element that represents the track of the range slider.

• Selector: [ngpRangeSliderTrack]
• Exported As: ngpRangeSliderTrack

Data Attributes

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

NgpRangeSliderRange

Apply the `ngpRangeSliderRange` directive to an element that represents the range between the low and high values.

• Selector: [ngpRangeSliderRange]
• Exported As: ngpRangeSliderRange

Data Attributes

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

NgpRangeSliderThumb

Apply the `ngpRangeSliderThumb` directive to an element that represents a thumb of the range slider. Each thumb can be configured to control either the 'low' or 'high' value.

• Selector: [ngpRangeSliderThumb]
• Exported As: ngpRangeSliderThumb

Data Attributes

The following data attributes are available to style the thumb:

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