Slider

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

import { Component, signal } from '@angular/core';
import { HlmSliderImports } from '@spartan-ng/helm/slider';

@Component({
	selector: 'spartan-slider-preview',
	imports: [HlmSliderImports],
	styles: `
		:host {
			display: block;
			width: 60%;
		}
	`,
	template: `
		<hlm-slider [(value)]="value" />
	`,
})
export class SliderPreview {
	public readonly value = signal([75]);
}

Installation

ng g @spartan-ng/cli:ui slider

Usage

import { HlmSliderImports } from '@spartan-ng/helm/slider';

<hlm-slider />

Examples

Range

Use an array with two values for a range slider.

import { Component, signal } from '@angular/core';
import { HlmSliderImports } from '@spartan-ng/helm/slider';

@Component({
	selector: 'spartan-slider-range',
	imports: [HlmSliderImports],
	styles: `
		:host {
			display: block;
			width: 60%;
		}
	`,
	template: `
		<hlm-slider [(value)]="value" />
	`,
})
export class SliderRange {
	public readonly value = signal([25, 50]);
}

Multiple Thumbs

Use an array with multiple values for multiple thumbs.

import { Component, signal } from '@angular/core';
import { HlmSliderImports } from '@spartan-ng/helm/slider';

@Component({
	selector: 'spartan-slider-multiple-thumbs',
	imports: [HlmSliderImports],
	styles: `
		:host {
			display: block;
			width: 60%;
		}
	`,
	template: `
		<hlm-slider [(value)]="value" />
	`,
})
export class SliderMultipleThumbs {
	public readonly value = signal([10, 20, 70]);
}

Vertical

Use orientation="vertical" for a vertical slider.

import { Component, signal } from '@angular/core';
import { HlmSliderImports } from '@spartan-ng/helm/slider';

@Component({
	selector: 'spartan-slider-vertical',
	imports: [HlmSliderImports],
	styles: `
		:host {
			display: flex;
			gap: 1.5rem;
		}
	`,
	template: `
		<hlm-slider [(value)]="value" orientation="vertical" />
		<hlm-slider [(value)]="value2" orientation="vertical" />
	`,
})
export class SliderVertical {
	public readonly value = signal([50]);
	public readonly value2 = signal([25]);
}

Disabled

Use the disabled input to disable the slider.

import { Component, signal } from '@angular/core';
import { HlmSliderImports } from '@spartan-ng/helm/slider';

@Component({
	selector: 'spartan-slider-disabled',
	imports: [HlmSliderImports],
	styles: `
		:host {
			display: block;
			width: 60%;
		}
	`,
	template: `
		<hlm-slider [(value)]="value" [disabled]="true" />
	`,
})
export class SliderDisabled {
	public readonly value = signal([50]);
}

Ticks

100

import { Component, signal } from '@angular/core';
import { HlmSliderImports } from '@spartan-ng/helm/slider';

@Component({
	selector: 'spartan-slider-ticks',
	imports: [HlmSliderImports],
	styles: `
		:host {
			display: block;
			width: 60%;
		}
	`,
	template: `
		<hlm-slider [(value)]="value" [showTicks]="true" />
	`,
})
export class SliderTicks {
	public readonly value = signal([50]);
}

Ticks with label

Volume

100

import { Component, signal } from '@angular/core';
import { HlmLabel } from '@spartan-ng/helm/label';
import { HlmSliderImports } from '@spartan-ng/helm/slider';

@Component({
	selector: 'spartan-slider-ticks-with-label',
	imports: [HlmSliderImports, HlmLabel],
	styles: `
		:host {
			display: block;
			width: 60%;
		}
	`,
	template: `
		<div class="flex flex-col gap-2">
			<label hlmLabel for="volume">Volume</label>
			<hlm-slider id="volume" [(value)]="value" [showTicks]="true" />
		</div>
	`,
})
export class SliderTicksWithLabel {
	public readonly value = signal([50]);
}

Prevent thumb overlap

Use minStepsBetweenThumbs to avoid thumbs with equal values.

import { Component, signal } from '@angular/core';
import { HlmSliderImports } from '@spartan-ng/helm/slider';

@Component({
	selector: 'spartan-slider-prevent-thumb-overlap',
	imports: [HlmSliderImports],
	styles: `
		:host {
			display: block;
			width: 60%;
		}
	`,
	template: `
		<hlm-slider [(value)]="value" [step]="10" [minStepsBetweenThumbs]="1" />
	`,
})
export class SliderPreventThumbOverlap {
	public readonly value = signal([20, 50]);
}

Draggable Range

Use draggableRange to enable moving all thumbs together when dragging by the selected range.

import { Component, signal } from '@angular/core';
import { HlmSliderImports } from '@spartan-ng/helm/slider';

@Component({
	selector: 'spartan-slider-draggable-range',
	imports: [HlmSliderImports],
	styles: `
		:host {
			display: block;
			width: 60%;
		}
	`,
	template: `
		<hlm-slider [(value)]="value" [draggableRange]="true" />
	`,
})
export class SliderDraggableRange {
	public readonly value = signal([25, 50]);
}

Draggable Range Only

Use draggableRangeOnly in pair with draggableRange to allow only dragging the range.

import { Component, signal } from '@angular/core';
import { HlmSliderImports } from '@spartan-ng/helm/slider';

@Component({
	selector: 'spartan-slider-draggable-range-only',
	imports: [HlmSliderImports],
	styles: `
		:host {
			display: block;
			width: 60%;
		}
	`,
	template: `
		<hlm-slider [(value)]="value" [draggableRange]="true" [draggableRangeOnly]="true" />
	`,
})
export class SliderDraggableRangeOnly {
	public readonly value = signal([25, 50]);
}

Form

import { Component, inject } from '@angular/core';
import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
import { HlmButton } from '@spartan-ng/helm/button';
import { HlmHint } from '@spartan-ng/helm/form-field';
import { HlmLabel } from '@spartan-ng/helm/label';
import { HlmSliderImports } from '@spartan-ng/helm/slider';

@Component({
	selector: 'spartan-slider-form',
	imports: [HlmSliderImports, ReactiveFormsModule, HlmButton, HlmHint, HlmLabel],
	styles: `
		:host {
			display: block;
			width: 60%;
		}
	`,
	template: `
		<form class="space-y-6" [formGroup]="form" (ngSubmit)="submit()">
			<div class="grid w-full max-w-sm items-center gap-2">
				<label hlmLabel for="volume">Volume</label>
				<hlm-slider id="volume" formControlName="volume" />
				<hlm-hint>Set your speaker volume.</hlm-hint>
			</div>
			<button hlmBtn type="submit">Submit</button>
		</form>
	`,
})
export class SliderForm {
	private readonly _formBuilder = inject(FormBuilder);
	public form = this._formBuilder.group({
		volume: [[25], Validators.required],
	});

	submit() {
		console.log(this.form.value);
	}
}

Brain API

BrnSliderRange

Selector: [brnSliderRange]

BrnSliderThumb

Selector: [brnSliderThumb]

BrnSliderTick

Selector: [brnSliderTick]

BrnSliderTrack

Selector: [brnSliderTrack]

BrnSlider

Selector: [brnSlider]

ExportAs: brnSlider

Inputs

Prop	Type	Default	Description
id	string	`brn-slider-${++nextId}`	Unique identifier for the slider element. Auto-generated if not provided.
aria-label	string \| null	null	Accessibility label for the slider. Forwarded to all thumbs.
aria-labelledby	string \| null	null	ID of the element that labels this slider for accessibility. Forwarded to all thumbs.
min	number	0	Minimum allowed slider value.
max	number	100	Maximum allowed slider value.
step	number	1	Step increment used when changing values.
minStepsBetweenThumbs	number	0	Minimum number of steps required between thumbs in a range slider.
disabled	boolean	false	Whether the slider is disabled.
inverted	boolean	false	Whether the slider direction is inverted.
orientation	'horizontal' \| 'vertical'	horizontal	Slider orientation.
showTicks	boolean	false	Whether tick marks should be displayed.
maxTicks	number	25	Maximum number of ticks to render. Excess ticks are evenly distributed.
tickLabelInterval	number	2	Interval at which tick labels are shown. A value of `2` shows a label every second tick.
formatTick	(tick: number) => string	(tick) => tick.toString()	Defines how the tick should be displayed in the UI.
draggableRange	boolean	false	Whether dragging the selected range should move all thumbs together.
draggableRangeOnly	boolean	false	Whether only dragging the range should work (overrides normal track clicks).
value	number[]	[]	The current slider value(s). For single-thumb sliders, this contains one value. For range sliders, values are kept sorted in ascending order.

Outputs

Prop	Type	Default	Description
valueChange	number[]	-	Emits when the value changes.

Helm API

HlmSlider

Selector: hlm-slider, brn-slider [hlm]

Sonner

Skeleton

On This Page

Stop configuring. Start shipping.

Zerops powers spartan.ng and Angular teams worldwide.

One-command deployment. Zero infrastructure headaches.