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
SyntaxError: Unexpected token (1:8)
1 : return ()
            ^

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,});

Additional resources#