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.