Skip to main content
Version: 1.x

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
<fast-slider min="0" max="100" step="10" value="70">
    <fast-slider-label
        position="0"
    >
        0
    </fast-slider-label>
    <fast-slider-label
        position="10"
    >
        10
    </fast-slider-label>
    <fast-slider-label
        position="90"
    >
        90
    </fast-slider-label>
    <fast-slider-label
        position="100"
    >
        100
    </fast-slider-label>
</fast-slider>
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

Events

NameTypeDescriptionInherited From
changeFires a custom 'change' event when the slider value changes

Attributes

NameFieldInherited From
readonlyreadOnly
min
max
step
orientationorientation
modemode

CSS Parts

NameDescription
positioning-regionThe region used to position the elements of the slider
track-containerThe region containing the track elements
track-startThe element wrapping the track start slot
thumb-containerThe thumb container element which is programatically positioned

Slots

NameDescription
trackThe track of the slider
track-startThe track-start visual indicator
thumbThe slider thumb
The default slot for labels

Variables

NameDescriptionType
SliderModeThe selection modes of a @microsoft/fast-foundation#(Slider:class).{ singleValue: "single-value", }

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

CSS Parts

NameDescription
rootThe element wrapping the label mark and text

Slots

NameDescription
The default slot for the label content

Additional resources