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(50);
}

Installation

ng g @spartan-ng/cli:ui slider

Usage

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

<hlm-slider />

Brain API

BrnSliderRange

Selector: [brnSliderRange]

BrnSliderThumb

Selector: [brnSliderThumb]

BrnSliderTick

Selector: [brnSliderTick]

BrnSliderTrack

Selector: [brnSliderTrack]

BrnSlider

Selector: [brnSlider]

ExportAs: brnSlider

Inputs

Prop	Type	Default	Description
min	number	0	-
max	number	100	-
step	number	1	-
disabled	boolean	false	-
showTicks	boolean	false	Whether we should show tick marks
value	number	0	-

Outputs

Prop	Type	Default	Description
valueChange	number	-	Emits when the value changes.
valueChanged	number	0	-

Helm API

HlmSlider

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

Inputs

Prop	Type	Default	Description
class	ClassValue	-	-

Sonner

Skeleton

On This Page

Stop configuring. Start shipping.

Zerops powers spartan.ng and Angular teams worldwide.

One-command deployment. Zero infrastructure headaches.