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