Slider

At a glance

• API — qzSlider, qzSliderTrack, qzSliderRange, qzSliderThumb
• Keyboard — Arrows, Home/End, PageUp/PageDown
• Pointer — Track press and drag via pointer capture
• CLI — pnpm quartz add slider

Playground

Live examples

Code

Basic, decimal, vertical, RTL and disabled

volume = signal(50);

<div qzSlider [(value)]="volume" [min]="0" [max]="100" [step]="1">
  <div qzSliderTrack>
    <div qzSliderRange></div>
    <button qzSliderThumb aria-label="Volume"></button>
  </div>
</div>