Slider
An input where the user selects a value from within a given range.
Default
The standard slider component.
Value: 50
slider-example-default.ts
Reactive Forms
Using the slider with Angular Reactive Forms.
Form Value: null
slider-example-form.ts
Template-driven Forms
Using the slider with Angular Template-driven Forms.
20°C
slider-example-template-form.ts
Disabled
The slider can be disabled to prevent user interaction.
Disabled Slider (Value: 50)
slider-example-disabled.ts
Range & Steps
Customizing min, max, and step values.
Value: 25
Value: 0
slider-example-min-max.ts
Steps & Ticks
Using custom steps and displaying visual ticks.
Value: 30
Value: 60
slider-example-ticks.ts
Vertical
Slider with vertical orientation.
slider-example-vertical.ts
Colors
Custom styling using Tailwind classes.
slider-example-colors.ts
Installation & Usage
Installation
Imports
Basic Usage
API Reference
Brain API
The Brain component provides the core accessibility and logic for the slider.
| Directive | Selector | Inputs |
|---|---|---|
| BrnSlider | brn-slider |
|
Helm API
The Helm component provides the spartan/ui styling for the slider.
| Directive | Selector | Inputs |
|---|---|---|
| HlmSlider | hlm-slider, brn-slider[hlm] |
|