slider

An input where the user selects a value from within a given range.

PreviousNext
import { ChangeDetectionStrategy, Component } from '@angular/core';

import { ZardSliderComponent } from '../slider.component';

@Component({
  selector: 'z-demo-slider-preview',
  imports: [ZardSliderComponent],
  template: `
    <div class="flex min-h-50 w-full items-center p-10">
      <z-slider class="mx-auto w-full max-w-xs" [zDefault]="[75]" />
    </div>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ZardDemoSliderPreviewComponent {}

Installation

Copy
npx zard-cli@latest add slider

Usage

import { ZardSliderComponent } from '@/shared/components/slider/slider.component';
Copy
<z-slider [zDefault]="50" [zMax]="100" [zStep]="1"></z-slider>
Copy

Examples

range

Bind [zDefault] (or [zValue]) to a two-value array — [lower, upper] — for a range slider with two independently draggable thumbs.
import { ChangeDetectionStrategy, Component } from '@angular/core';

import { ZardSliderComponent } from '../slider.component';

@Component({
  selector: 'z-demo-slider-range',
  imports: [ZardSliderComponent],
  template: `
    <div class="flex min-h-50 w-full items-center p-10">
      <z-slider class="mx-auto w-full max-w-xs" [zDefault]="[25, 50]" />
    </div>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ZardDemoSliderRangeComponent {}

multiple thumbs

Bind [zDefault] (or [zValue]) to an array with three or more values to render one thumb per entry.
import { ChangeDetectionStrategy, Component } from '@angular/core';

import { ZardSliderComponent } from '../slider.component';

@Component({
  selector: 'z-demo-slider-multiple',
  imports: [ZardSliderComponent],
  template: `
    <div class="flex min-h-50 w-full items-center justify-center p-10">
      <z-slider class="mx-auto w-full max-w-xs" [zDefault]="[10, 20, 70]" />
    </div>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ZardDemoSliderMultipleComponent {}

vertical

Set [zOrientation]="vertical" for a vertical slider.
import { ChangeDetectionStrategy, Component } from '@angular/core';

import { ZardSliderComponent } from '../slider.component';

@Component({
  selector: 'z-demo-slider-vertical',
  imports: [ZardSliderComponent],
  template: `
    <div class="flex h-50 w-full items-center justify-center">
      <div class="flex h-full w-20 justify-center gap-6">
        <z-slider [zDefault]="[50]" zOrientation="vertical" />
        <z-slider [zDefault]="[25]" zOrientation="vertical" />
      </div>
    </div>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ZardDemoSliderVerticalComponent {}

controlled

Bind [zValue] and listen for (zSlideIndexChange) to drive the slider value from a signal.
0.3, 0.7
import { ChangeDetectionStrategy, Component, signal } from '@angular/core';

import { ZardFieldImports } from '@/shared/components/field';

import { ZardSliderComponent } from '../slider.component';

@Component({
  selector: 'z-demo-slider-controlled',
  imports: [ZardSliderComponent, ...ZardFieldImports],
  template: `
    <div class="flex min-h-50 w-full flex-col items-center justify-center gap-2 p-10">
      <div class="mx-auto flex w-full max-w-xs justify-between">
        <label z-field-label for="slider-demo-temperature">Temperature</label>
        <span class="text-muted-foreground text-sm">{{ value().join(', ') }}</span>
      </div>
      <z-slider
        id="slider-demo-temperature"
        class="mx-auto w-full max-w-xs"
        zMin="0"
        zMax="1"
        zStep="0.1"
        [zValue]="value()"
        (zSlideIndexChange)="onSlide($event)"
      />
    </div>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ZardDemoSliderControlledComponent {
  readonly value = signal([0.3, 0.7]);

  onSlide(value: number[]) {
    this.value.set(value.map(v => Math.round(v * 10) / 10));
  }
}

disabled

Use the zDisabled input to disable slider interaction.
import { ChangeDetectionStrategy, Component } from '@angular/core';

import { ZardSliderComponent } from '../slider.component';

@Component({
  selector: 'z-demo-slider-disabled',
  imports: [ZardSliderComponent],
  template: `
    <div class="flex min-h-50 w-full items-center p-10">
      <z-slider class="mx-auto w-full max-w-xs" [zDefault]="[50]" zDisabled />
    </div>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ZardDemoSliderDisabledComponent {}

rtl

To enable RTL support in zard/ui, see the RTL configuration guide.
مستوى الصوت
نطاق السعر
// You will notice this example is rendered inside a wrapper that sets the dir and data-lang attributes, and
// reads its text from a translations helper. This is because this site is not RTL by default.
// In your application you won't need either: set dir="rtl" on <html> (or use the CDK Dir directive on a subtree)
// and write the text of your own language. See the RTL guide: https://zardui.com/docs/rtl

import { ChangeDetectionStrategy, Component } from '@angular/core';

import { ZardSliderComponent } from '@/shared/components/slider/slider.component';
import { injectRtlTranslation, type ZardRtlTranslations } from '@/shared/demo-utils/rtl-translation';

const translations: ZardRtlTranslations<{ volume: string; range: string }> = {
  en: {
    dir: 'ltr',
    values: {
      volume: 'Volume',
      range: 'Price range',
    },
  },
  ar: {
    dir: 'rtl',
    values: {
      volume: 'مستوى الصوت',
      range: 'نطاق السعر',
    },
  },
  he: {
    dir: 'rtl',
    values: {
      volume: 'עוצמת קול',
      range: 'טווח מחירים',
    },
  },
};

@Component({
  selector: 'z-demo-slider-rtl',
  imports: [ZardSliderComponent],
  template: `
    <div class="flex w-full max-w-xs flex-col gap-6">
      <div class="flex flex-col gap-3">
        <span class="text-sm font-medium">{{ i18n.t().volume }}</span>
        <z-slider [zDefault]="[75]" />
      </div>
      <div class="flex flex-col gap-3">
        <span class="text-sm font-medium">{{ i18n.t().range }}</span>
        <z-slider [zDefault]="[20, 60]" />
      </div>
    </div>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ZardDemoSliderRtlComponent {
  protected readonly i18n = injectRtlTranslation(translations);
}

API Reference

z-sliderComponent

A flexible and accessible component that allows users to select a numeric value from within a configurable range using pointer or keyboard interaction. The value is always an array of numbers, one entry per thumb: a single-element array renders one thumb, two elements render a range (see the `range` example), and three or more render that many independent thumbs (see the `multiple-thumbs` example) — values must be provided in ascending order. Implements Angular’s `ControlValueAccessor`, so `formControlName` and `[(ngModel)]` also work. In RTL (CDK `Directionality`) the range fills from the right, ArrowRight decreases and ArrowLeft increases the value, and dragging follows the pointer.

PropertyDescriptionTypeDefault
[class] Custom CSS classes string ''
[zMin] Minimum selectable value number 0
[zMax] Maximum selectable value. When zMax <= 1, values are automatically normalized to a 0-100% visual scale number 100
[zDefault] Uncontrolled initial value, read once. One number per thumb, ascending: [value] for a single thumb, [lower, upper] for a range, or more entries for additional thumbs. Ignored once [zValue] is bound number[] [0]
[zValue] Controlled value — pair with (zSlideIndexChange) to own the value from the parent. Same shape as [zDefault]: one number per thumb, ascending number[] []
[zStep] Step increment for the value number 1
[zDisabled] Disables slider interaction boolean false
[zOrientation] Slider orientation horizontal | vertical 'horizontal'
(zSlideIndexChange) Emitted when a thumb value changes. Always emits the full array of current values EventEmitter<number[]> -
github iconwhatsapp icondiscord iconX icon

Made with ❤ in Brazil. Open source and available on GitHub .