Spartans get ready! v1 is coming!

We are very close to our first stable release. Expect more announcements in the coming weeks. v1 was made possible by our partner Zerops.

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],
	template: `
		<hlm-slider [(value)]="value" />
	`,
	styles: `
		:host {
			display: block;
			width: 60%;
		}
	`,
})
export class SliderPreview {
	public readonly value = signal(50);
}

Installation

npx nx 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