Slider
The mdcSlider directive creates a material designed slider.
Accessibility
The directive adds various aria-* attributes based on the state
of the slider. For full accessibility the slider should be given a meaningful
label by setting the aria-label, or aria-labelledby
attribute.
API
Directive: MdcSliderDirective
Selector: [mdcSlider]
Directive for creating a Material Design slider input.
(Modelled after the <input type="range"/> element).
The slider is fully accessible. The current implementation
will add and manage all DOM child elements that are required for the wrapped
mdc-slider component.
Future implementations will also support supplying (customized)
DOM children.
| Property | Description |
|---|---|
@Output()
valueChange
EventEmitter<number>
|
Event emitted when the value changes. The value may change because of user input, or as a side affect of setting new min, max, or step values. |
@Output()
minValueChange
EventEmitter<number>
|
Event emitted when the min range value changes. This may happen as a side effect of setting a new max value (when the new max is smaller than the old min). |
@Output()
maxValueChange
EventEmitter<number>
|
Event emitted when the max range value changes. This may happen as a side effect of setting a new min value (when the new min is larger than the old max). |
@Output()
stepValueChange
EventEmitter<number>
|
Event emitted when the step value changes. This may happen as a side effect of making the slider discrete. |
@Input()
discrete
boolean
|
Make the slider discrete. Note from the wrapped If a slider contains a step value it does not mean that the slider is a "discrete" slider. "Discrete slider" is a UX treatment, while having a step value is behavioral. |
@Input()
markers
boolean
|
Property to enable/disable the display of track markers. Display markers are only supported for discrete sliders. Thus they are only shown when the values of both markers and discrete equal true. |
@Input()
value
number
|
The current value of the slider. |
@Input()
minValue
number
|
The minumum allowed value of the slider. |
@Input()
maxValue
number
|
The maximum allowed value of the slider. |
@Input()
stepValue
number
|
Set the step value (or set to 0 for no step value).
The step value can be a floating point value >= 0.
The slider will quantize all values to match the step value, except for the minimum and
maximum, which can always be set.
Discrete sliders are required to have a step value other than 0.
Note from the wrapped If a slider contains a step value it does not mean that the slider is a "discrete" slider. "Discrete slider" is a UX treatment, while having a step value is behavioral. |
@Input()
disabled
boolean
|
A property to disable the slider. |
Directive: MdcFormsSliderDirective
Selector: [mdcSlider][formControlName] [mdcSlider][formControl] [mdcSlider][ngModel]
Directive for adding Angular Forms (ControlValueAccessor) behavior to an
MdcSliderDirective. Allows the use of the Angular Forms API with
icon toggles, e.g. binding to [(ngModel)], form validation, etc.