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

FluentSlider

The <FluentSlider> uses the <FluentSliderLabel> component for the labels shown.

<FluentSlider> wraps the <fluent-slider> element, a web component implementation of a range slider leveraging the Fluent UI design system.

Usage

@using Microsoft.Fast.Components.FluentUI
<FluentSlider Min="0" Max="100" Step="5">
    <FluentSliderLabel Position="0">
        0
    </FluentSliderLabel>
    <FluentSliderLabel Position="10">
        10
    </FluentSliderLabel>
    <FluentSliderLabel Position="20">
        20
    </FluentSliderLabel>
    <FluentSliderLabel Position="30">
        30
    </FluentSliderLabel>
    <FluentSliderLabel Position="40">
        40
    </FluentSliderLabel>
    <FluentSliderLabel Position="50">
        50
    </FluentSliderLabel>
    <FluentSliderLabel Position="60">
        60
    </FluentSliderLabel>
    <FluentSliderLabel Position="70">
        70
    </FluentSliderLabel>
    <FluentSliderLabel Position="80">
        80
    </FluentSliderLabel>
    <FluentSliderLabel Position="90">
        90
    </FluentSliderLabel>
    <FluentSliderLabel Position="100">
        100
    </FluentSliderLabel>
</FluentSlider>

Example

See the component in action with implementation examples at the Blazor demo site.

Additional Resources

Code in GitHub W3C Component Aria Practices