The Slider component allows users to select a value or range of values by dragging a handle along a track.
Basic usage
<flx-slider
label="Volume"
[(ngModel)]="volume"
[min]="0"
[max]="100">
</flx-slider>
Properties
Label text displayed above the slider
value
number | [number, number]
Current value or range values
Shows current value(s) display
Shows tick marks along the track
Enables range selection with two handles
Displays slider vertically
marks
{ value: number, label: string }[]
Custom marks to display along the track
Events
valueChange
EventEmitter<number | [number, number]>
Emitted when value changes
Emitted when dragging starts
Emitted when dragging ends
Examples
Basic slider
With custom steps
Range slider
With marks
With ticks
Vertical slider
Reactive forms
<flx-slider
label="Brightness"
[(ngModel)]="brightness"
[min]="0"
[max]="100"
[step]="5">
</flx-slider>
<p>Current brightness: {{ brightness }}%</p>
export class BrightnessControl {
brightness = 50;
}
<flx-slider
label="Price"
[(ngModel)]="price"
[min]="0"
[max]="1000"
[step]="50">
</flx-slider>
<flx-slider
label="Price range"
[(ngModel)]="priceRange"
[min]="0"
[max]="1000"
[step]="10"
[range]="true">
</flx-slider>
<p>{{ priceRange[0] }} - {{ priceRange[1] }}</p>
export class PriceFilter {
priceRange = [200, 800];
}
<flx-slider
label="Size"
[(ngModel)]="size"
[min]="0"
[max]="4"
[step]="1"
[marks]="sizeMarks">
</flx-slider>
export class SizeSelector {
size = 2;
sizeMarks = [
{ value: 0, label: 'XS' },
{ value: 1, label: 'S' },
{ value: 2, label: 'M' },
{ value: 3, label: 'L' },
{ value: 4, label: 'XL' }
];
}
<flx-slider
label="Rating"
[(ngModel)]="rating"
[min]="1"
[max]="5"
[step]="1"
[showTicks]="true">
</flx-slider>
<div style="height: 200px;">
<flx-slider
label="Temperature"
[(ngModel)]="temperature"
[min]="0"
[max]="40"
[vertical]="true">
</flx-slider>
</div>
<form [formGroup]="settingsForm">
<flx-slider
label="Timeout (seconds)"
formControlName="timeout"
[min]="5"
[max]="60"
[step]="5">
</flx-slider>
<flx-slider
label="Max connections"
formControlName="maxConnections"
[min]="10"
[max]="100"
[step]="10">
</flx-slider>
</form>
import { FormBuilder } from '@angular/forms';
export class SettingsForm {
settingsForm = this.fb.group({
timeout: [30],
maxConnections: [50]
});
constructor(private fb: FormBuilder) {}
}
Styling
flx-slider {
--flx-slider-track-height: 4px;
--flx-slider-track-background: #e5e7eb;
--flx-slider-track-active-background: #3b82f6;
--flx-slider-handle-size: 16px;
--flx-slider-handle-background: #ffffff;
--flx-slider-handle-border: 2px solid #3b82f6;
--flx-slider-handle-shadow: 0 2px 4px rgba(0,0,0,0.1);
--flx-slider-tick-size: 2px;
--flx-slider-tick-color: #9ca3af;
}
Accessibility
The Slider component is fully accessible:
role="slider" with appropriate ARIA attributesaria-valuemin, aria-valuemax, aria-valuenowaria-valuetext for labeled values- Keyboard control (Arrow keys, Home, End, Page Up/Down)
- Focus indicators
Best practices
- Set appropriate
min, max, and step values for your use case
- Use
marks for discrete value sets with labels
- Enable
showValue to provide visual feedback
- Consider using
showTicks for discrete steps
- Use range sliders for filtering by ranges
- Provide labels that clearly indicate what the slider controls
- For critical values, consider pairing with a numeric input
For sliders controlling sensitive values (like volume or price), consider using smaller step values and enabling ticks for better precision.