Slider
Slider is a component to provide input with a drag handle.
Two-way binding is defined using the standard ngModel directive.
Usage #
Examples #
Basic #
Two-way binding is defined using the standard ngModel directive.
Input #
Slider is connected to an input field using two-way binding.
Step #
Size of each movement is defined with the step property.
Range #
When range property is present, slider provides two handles to define two values. In range mode, value should be an array instead of a single value.
Filter #
Image filter implementation using multiple sliders.
Vertical #
Default layout of slider is horizontal, use orientation property for the alternative vertical mode.
Forms #
Template Driven #
Reactive Forms #
Slider can also be used with reactive forms. In this case, the formControlName property is used to bind the component to a form control.
Accessibility #
Screen Reader
Slider element component uses slider role on the handle in addition to the aria-orientation, aria-valuemin, aria-valuemax and aria-valuenow attributes. Value to describe the component can be defined using ariaLabelledBy and ariaLabel props.
Keyboard Support
| Key | Function |
|---|---|
| tab | Moves focus to the slider. |
| left arrowup arrow | Decrements the value. |
| right arrowdown arrow | Increments the value. |
| home | Set the minimum value. |
| end | Set the maximum value. |
| page up | Increments the value by 10 steps. |
| page down | Decrements the value by 10 steps. |
