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 --fluent-slider-height, by default that equates to (10px * var(--thumb-size)) or 160px. Inline styles will override that height.

fluent-slider

Setup

import {
    provideFluentDesignSystem,
    fluentSlider,
    fluentSliderLabel
} from "@fluentui/web-components";

provideFluentDesignSystem()
    .register(
        fluentSlider(),
        fluentSliderLabel()
    );

Customizing the thumb

import {
    provideFluentDesignSystem,
    fluentSlider,
    fluentSliderLabel
} from "@fluentui/web-components";

provideFluentDesignSystem()
    .register(
        fluentSlider({
            thumb: `...your thumb...`
        }),
        fluentSliderLabel()
    );

Example

Please see the Blazor documentation and demo site for more information.

Additional Resources

Code in GitHub W3C Component Aria Practices