Componente

Slider

Um slider de valor arrastável. Vincule um valor único ou um intervalo, defina os limites e o passo, mostre um tooltip e marcações, formate a exibição, oriente-o horizontal ou verticalmente, e controle-o como um controle de formulário.

Valor único e 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);
}

Intervalo, gap e formato

$200 – $700

Marcações, tamanhos, vertical e desabilitado

0 Low High Max

Referência de API

hb-slider — value

Propriedade	Descrição	Tipo	Padrão
[(hbValue)]	Um número para um thumb único, ou um array para um intervalo. Bidirecional; também um controle de formulário.	number \| number[]	null
[hbDefaultValue]	O valor inicial quando hbValue não é vinculado (sua aridade também decide único vs intervalo).	number \| number[]	—
[hbMin] / [hbMax] / [hbStep]	Os limites de valor e o incremento ao qual os valores se ajustam.	number	0 / 100 / 1
[hbMinStepsBetweenThumbs]	Espaço mínimo, em passos, mantido entre os thumbs de um intervalo.	number	0
(hbChange) / (hbChangeEnd)	Emitem o valor continuamente ao arrastar, e uma vez ao fim da interação.	number \| number[]	—

hb-slider — appearance

Propriedade	Descrição	Tipo	Padrão
[hbOrientation] / [hbInverted]	Dispõe-o horizontal ou verticalmente, e inverte o sentido do percurso.	'horizontal' \| 'vertical' / boolean	'horizontal' / false
[hbSize] / [hbDisabled]	Tamanho da trilha e do thumb, e um estado desabilitado.	'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' / boolean	'md' / false
[hbTooltip] / [hbFormat]	Mostra um tooltip de valor no thumb ativo, e formata o valor exibido.	boolean / (value: number) => string	false / —
[hbMarks]	Mostra marcações: true as distribui do mín ao máx, ou passe um array de valores ou objetos { value, label }.	boolean \| number[] \| HbSliderMark[]	false
[class] / [hbTrackClass] / [hbRangeClass] / [hbThumbClass]	Overrides de classe para a raiz, trilha, intervalo preenchido e thumbs.	ClassValue	''