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.

Slider Demo

Customize slider:

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.

PropertyDescription
@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
any

Make the slider discrete. Note from the wrapped mdc-slider component:

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
any

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
string | number

The current value of the slider.

@Input()
minValue
string | number

The minumum allowed value of the slider.

@Input()
maxValue
string | number

The maximum allowed value of the slider.

@Input()
stepValue
string | 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 mdc-slider component:

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
any

A property to disable the slider.

Methods

asNumber(value)
Parameters
value
number | string
Returns
number

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.