Primitives

Slider

Select a value within a range.

import { Component } from "@angular/core";
import {
  NgpSlider,
  NgpSliderRange,
  NgpSliderThumb,
  NgpSliderTrack,
} from "ng-primitives/slider";

@Component({
  selector: "app-slider",
  imports: [NgpSlider, NgpSliderRange, NgpSliderThumb, NgpSliderTrack],
  styles: `
    [ngpSlider] {
      display: flex;
      position: relative;
      width: 200px;
      height: 20px;
      touch-action: none;
      user-select: none;
      align-items: center;
    }

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

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

    [ngpSliderThumb] {
      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%);
    }

    [ngpSliderThumb][data-focus-visible] {
      outline: 2px solid var(--ngp-focus-ring);
      outline-offset: 0;
    }
  `,
  template: `
    <div [(ngpSliderValue)]="value" ngpSlider>
      <div ngpSliderTrack>
        <div ngpSliderRange></div>
      </div>
      <div ngpSliderThumb></div>
    </div>
  `,
})
export default class SliderExample {
  value = 50;
}

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>

Reusable Component

Create a reusable component that uses the slider directives.

import { Component } from '@angular/core';
import { Slider } from './slider';

@Component({
  selector: 'app-root',
  imports: [Slider],
  template: `
    <app-slider aria-label="Slider control" />
  `,
})
export default class App {}

Schematics

Generate a reusable slider component using the Angular CLI.

ng g ng-primitives:primitive slider

Options

path: The path at which to create the component file.
prefix: The prefix to apply to the generated component selector.
componentSuffix: The suffix to apply to the generated component class name.
fileSuffix: The suffix to apply to the generated component file name. Defaults to component.
exampleStyles: Whether to include example styles in the generated component file. Defaults to true.

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.

Volume

Adjust the volume of the speaker.

import { Component } from "@angular/core";
import {
  NgpDescription,
  NgpFormField,
  NgpLabel,
} from "ng-primitives/form-field";
import {
  NgpSlider,
  NgpSliderRange,
  NgpSliderThumb,
  NgpSliderTrack,
} from "ng-primitives/slider";

@Component({
  selector: "app-slider-form-field",
  imports: [
    NgpFormField,
    NgpLabel,
    NgpDescription,
    NgpSlider,
    NgpSliderRange,
    NgpSliderThumb,
    NgpSliderTrack,
  ],
  styles: `
    :host {
      display: contents;
    }

    [ngpFormField] {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    [ngpLabel] {
      color: var(--ngp-text-primary);
      font-size: 0.875rem;
      line-height: 1.25rem;
      font-weight: 500;
      margin: 0;
    }

    [ngpDescription] {
      color: var(--ngp-text-secondary);
      font-size: 0.75rem;
      line-height: 1rem;
      margin: 0 0 4px;
    }

    [ngpSlider] {
      display: flex;
      position: relative;
      width: 200px;
      height: 20px;
      touch-action: none;
      user-select: none;
      align-items: center;
    }

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

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

    [ngpSliderThumb] {
      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%);
    }

    [ngpSliderThumb][data-focus-visible] {
      outline: 2px solid var(--ngp-focus-ring);
      outline-offset: 0;
    }
  `,
  template: `
    <div ngpFormField>
      <label ngpLabel>Volume</label>
      <p ngpDescription>Adjust the volume of the speaker.</p>

      <div [(ngpSliderValue)]="value" ngpSlider>
        <div ngpSliderTrack>
          <div ngpSliderRange></div>
        </div>
        <div ngpSliderThumb></div>
      </div>
    </div>
  `,
})
export default class SliderFormFieldExample {
  value = 50;
}

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

ngpSliderValue

number

The value of the slider.

ngpSliderMin

number

The minimum value of the slider.

ngpSliderMax

number

The maximum value of the slider.

ngpSliderStep

number

The step value of the slider.

ngpSliderOrientation

NgpOrientation

The orientation of the slider.

ngpSliderDisabled

boolean

The disabled state of the slider.

ngpSliderValueChange

number

Emits when the value changes.

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

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.

Getting Started

Primitives

Interactions

Utilities

Slider

Import

Usage

Reusable Component

Schematics

Options

Examples

Slider Form Field

API Reference

NgpSlider

Data Attributes

NgpSliderTrack

Data Attributes

NgpSliderRange

Data Attributes

NgpSliderThumb

Data Attributes

Accessibility

Keyboard Interactions

On this page