Component

Slider

A draggable value slider. Bind a single value or a range, set the bounds and step, show a tooltip and marks, format the display, orient it horizontally or vertically, and drive it as a form control.

Single value & tooltip

Value: 35

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

import { HbSliderImports } from '@herbst/ui';

@Component({
  selector: 'hb-demo-slider-basic',
  imports: [HbSliderImports],
  template: `
    <div class="flex w-full max-w-md flex-col gap-3">
      <hb-slider [(hbValue)]="volume" hbTooltip [hbStep]="5" hbAriaLabel="Volume" />
      <p class="font-mono text-[12px] text-muted-foreground">Value: {{ volume() }}</p>
    </div>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class HbDemoSliderBasicComponent {
  protected readonly volume = signal<number | number[] | null>(35);
}

Range, gap & format

$200 – $700

Marks, sizes, vertical & disabled

0 Low High Max

API reference

hb-slider — value

Property	Description	Type	Default
[(hbValue)]	A number for a single thumb, or an array for a range. Two-way bound; also a form control.	number \| number[]	null
[hbDefaultValue]	The initial value when hbValue is not bound (its arity also decides single vs range).	number \| number[]	—
[hbMin] / [hbMax] / [hbStep]	The value bounds and the increment values snap to.	number	0 / 100 / 1
[hbMinStepsBetweenThumbs]	Minimum gap, in steps, kept between range thumbs.	number	0
(hbChange) / (hbChangeEnd)	Emit the value continuously while dragging, and once when the interaction ends.	number \| number[]	—

hb-slider — appearance

Property	Description	Type	Default
[hbOrientation] / [hbInverted]	Lay it out horizontally or vertically, and reverse the direction of travel.	'horizontal' \| 'vertical' / boolean	'horizontal' / false
[hbSize] / [hbDisabled]	Track and thumb size, and a disabled state.	'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' / boolean	'md' / false
[hbTooltip] / [hbFormat]	Show a value tooltip on the active thumb, and format the displayed value.	boolean / (value: number) => string	false / —
[hbMarks]	Show tick marks: true steps them from min to max, or pass an array of values or { value, label } objects.	boolean \| number[] \| HbSliderMark[]	false
[class] / [hbTrackClass] / [hbRangeClass] / [hbThumbClass]	Class overrides for the root, track, filled range, and thumbs.	ClassValue	''