Quartz Headless
All components
Primitives

Slider

Single-thumb slider with decimal-safe stepping, RTL and vertical geometry.

DocumentationAPI reference

Playground

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

Slider

A real qzSlider. The value control sets the value; dragging and keys override it. Committed fires per user change.

Value: 40

Inputs

Events

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

Template

<div
  qzSlider
  [(value)]="volume"
  [min]="0"
  [max]="100"
  [step]="5"
>&lt;div qzSliderTrack&gt;…&lt;button qzSliderThumb aria-label="Volume"&gt;&lt;/button&gt;&lt;/div&gt;</div>

Slider — expanded preview

Example

Slider
Loading demo…

Install

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

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

Prefer owning the source? Copy it with the CLI.