Skip to main content

@microsoft/fast-foundation > Slider

Slider class

A Slider Custom HTML Element. Implements the ARIA slider.

track - The track of the slider

track-start - The track-start visual indicator

thumb - The slider thumb

  • The default slot for labels

positioning-region - The region used to position the elements of the slider

track-container - The region containing the track elements

track-start - The element wrapping the track start slot

thumb-container - The thumb container element which is programatically positioned

change - Fires a custom 'change' event when the slider value changes

Signature:
export declare class Slider extends FormAssociatedSlider implements SliderConfiguration 

Properties

PropertyModifiersTypeDescription
keypressHandler(e: KeyboardEvent) => void
maxnumberThe maximum allowed value.
minnumberThe minimum allowed value.
modeSliderModeThe selection mode.
orientationOrientationThe orientation of the slider.
readOnlybooleanWhen true, the control will be immutable by user interaction. See readonly HTML attribute for more information.
stepnumberValue to increment or decrement via arrow keys, mouse click or drag.
valueAsNumbernumberThe value property, typed as a number.
valueTextFormatter(value: string) => string | nullCustom function that generates a string for the component's "aria-valuetext" attribute based on the current value.

Methods

MethodModifiersDescription
decrement()Decrement the value by the step
increment()Increment the value by the step