RangeSlider

Two-thumb range with non-crossing thumbs, minimum distance and { low, high } forms value.

Documentation API reference

Playground

Change the inputs, watch the outputs and copy the usage code.

RangeSlider

A real qzRangeSlider. Thumbs never cross; minDistance keeps them apart. Committed is the { low, high } object.

Range: 20 – 70

Inputs

Low

High

Min

Max

Step

Min distance

Orientation

Disabled

Events

No events yet. Interact with the preview to see them here.

Template

<div
  qzRangeSlider
  [(low)]="low"
  [(high)]="high"
  [min]="0"
  [max]="100"
  [step]="5"
>&lt;button qzRangeSliderThumb="low" aria-label="Minimum"&gt;&lt;/button&gt; …</div>

Example

RangeSlider

Loading demo…

Install

$ npm install @quartz-headless/core @quartz-headless/primitives

// exports
import { RangeSliderDirective } from '@quartz-headless/primitives';

Prefer owning the source? Copy it with the CLI.