Skip to main content

fast-slider

An implementation of a range slider as a form-connected web-component. Note that if the slider is in vertical orientation by default the component will get a height using the css var --fast-slider-height, by default that equates to (10px * var(--thumb-size)) or 160px. Inline styles will override that height.

Setup​

Basic Setup​

import {
provideFASTDesignSystem,
fastSlider,
fastSliderLabel
} from "@microsoft/fast-components";

provideFASTDesignSystem()
.register(
fastSlider(),
fastSliderLabel()
);

Customizing the Thumb​

import {
provideFASTDesignSystem,
fastSlider,
fastSliderLabel
} from "@microsoft/fast-components";

provideFASTDesignSystem()
.register(
fastSlider({
thumb: `...your thumb...`
}),
fastSliderLabel()
);

Usage​

Live Editor
Result
Loading...

Create your own design​

Slider​

import {
Slider,
SliderOptions,
sliderTemplate as template,
} from "@microsoft/fast-foundation";
import { sliderStyles as styles } from "./my-slider.styles";

export const mySlider = Slider.compose<SliderOptions>({
baseName: "slider",
template,
styles,
thumb: `...default thumb...`,
});

SliderLabel​

import {
SliderLabel,
sliderLabelTemplate as template,
} from "@microsoft/fast-foundation";
import { sliderLabelStyles as styles } from "./my-slider-label.styles";

export const mySliderLabel = SliderLabel.compose({
baseName: "slider-label",
template,
styles,
});

API​

Functions​

NameDescriptionParametersReturn
convertPixelToPercentConverts a pixel coordinate on the track to a percent of the track's rangepixelPos: number, minPosition: number, maxPosition: number, direction: Directionnumber

class: Slider​

Superclass​

NameModulePackage
FormAssociatedSlider/src/slider/slider.form-associated.js

Fields​

NamePrivacyTypeDefaultDescriptionInherited From
readOnlypublicbooleanWhen true, the control will be immutable by user interaction. See readonly HTML attribute for more information.
valueAsNumberpublicnumberThe value property, typed as a number.
valueTextFormatterpublic(value: string) => string or nullCustom function that generates a string for the component's "aria-valuetext" attribute based on the current value.
minpublicnumber0The minimum allowed value.
maxpublicnumber10The maximum allowed value.
steppublicnumber1Value to increment or decrement via arrow keys, mouse click or drag.
orientationpublicOrientationThe orientation of the slider.
modepublicSliderModeThe selection mode.
keypressHandlerprotected
proxyFormAssociatedSlider
$presentationpublicComponentPresentation or nullA property which resolves the ComponentPresentation instance for the current component.FoundationElement
templatepublicElementViewTemplate or void or nullSets the template of the element instance. When undefined, the element will attempt to resolve the template from the associated presentation or custom element definition.FoundationElement
stylespublicElementStyles or void or nullSets the default styles for the element instance. When undefined, the element will attempt to resolve default styles from the associated presentation or custom element definition.FoundationElement

Methods​

NamePrivacyDescriptionParametersReturnInherited From
incrementpublicIncrement the value by the stepvoid
decrementpublicDecrement the value by the stepvoid
setThumbPositionForOrientationpublicPlaces the thumb based on the current valuedirection: Directionvoid
templateChangedprotectedvoidFoundationElement
stylesChangedprotectedvoidFoundationElement

Attributes​

NameFieldInherited From
readonlyreadOnly
min
max
step
orientationorientation
modemode

class: SliderLabel​

Superclass​

NameModulePackage
FoundationElement/src/foundation-element/foundation-element.js

Fields​

NamePrivacyTypeDefaultDescriptionInherited From
positionpublicstringThe position of the label relative to the min and max value of the parent @microsoft/fast-foundation#(Slider:class).
hideMarkpublicbooleanfalseHides the tick mark.
disabledpublicbooleanThe disabled state of the label. This is generally controlled by the parent @microsoft/fast-foundation#(Slider:class).
$presentationpublicComponentPresentation or nullA property which resolves the ComponentPresentation instance for the current component.FoundationElement
templatepublicElementViewTemplate or void or nullSets the template of the element instance. When undefined, the element will attempt to resolve the template from the associated presentation or custom element definition.FoundationElement
stylespublicElementStyles or void or nullSets the default styles for the element instance. When undefined, the element will attempt to resolve default styles from the associated presentation or custom element definition.FoundationElement

Methods​

NamePrivacyDescriptionParametersReturnInherited From
templateChangedprotectedvoidFoundationElement
stylesChangedprotectedvoidFoundationElement

Attributes​

NameFieldInherited From
positionposition
hide-markhideMark
disableddisabled

Additional resources​