Slider
As defined by the W3C:
A slider is an input where the user selects a value from within a given range. Sliders typically have a slider thumb that can be moved along a bar, rail, or track to change the value of the slider.
An implementation of a range slider.
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.
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.
Examples
Toggle orientation
Selected value: 70
Value is of type double
Selected value: 3.5
Vertical slider
Labels
Text labels
Custom labels and rtl support
Thumbs
Custom thumb
Custom labels and thumb and hidden marks on labels
States
Disabled
Read Only
Documentation
FluentSlider<TValue> Class
Inherits from FluentInputBase<TValue>.
There might be parameters and/or methods shown here that are inherited from the component's base type but are not applicable to this component.
TValue can be one of the following Type's:
intlongshortfloatdoubledecimal
Parameters
Name | Type | Default | Description |
|---|---|---|---|
AriaLabel | string? | Gets or sets the text used on aria-label attribute. | |
Autofocus | bool | False | Determines if the element should receive document focus on page load. |
ChildContent | RenderFragment? | Gets or sets the content to be rendered inside the component. | |
Disabled | bool | False | Disables the form control, ensuring it doesn't participate in form submission. |
DisplayName | string? | Gets or sets the display name for this field. | |
Embedded | bool | False | Gets or sets if the derived component is embedded in another component. If true, the ClassValue property will not include the EditContext's FieldCssClass. |
Field | FieldIdentifier? | Gets or sets the FluentInputBase that identifies the bound value.If set, this parameter takes precedence over FluentInputBase. | |
Immediate | bool | False | Change the content of this input field when the user write text (based on 'OnInput' HTML event). |
ImmediateDelay | int | 0 | Gets or sets the delay, in milliseconds, before to raise the FluentInputBase event. |
Label | string? | Gets or sets the text to label the input. This is usually displayed just above the input | |
LabelTemplate | RenderFragment? | Gets or sets the content to label the input component. This is usually displayed just above the input | |
Max | TValue? | Gets or sets the slider's maximum value. | |
Min | TValue? | Gets or sets the slider's minimal value. | |
Mode | SliderMode? | Gets or sets the selection mode. | |
Name | string? | Gets or sets the name of the element. Allows access by name from the associated form. ⚠️ This value needs to be set manually for SSR scenarios to work correctly. | |
Orientation | Orientation? | Gets or sets the orientation of the slider. See Orientation | |
Placeholder | string? | Gets or sets the short hint displayed in the input before the user enters a value. | |
ReadOnly | bool | False | When true, the control will be immutable by user interaction. readonly HTML attribute for more information. |
Required | bool | False | Gets or sets a value indicating whether the element needs to have a value. |
Step | TValue? | Gets or sets the slider's step value. | |
Value | TValue? | Gets or sets the value of the input. This should be used with two-way binding. | |
ValueExpression | Expression<Func<TValue>>? | Gets or sets an expression that identifies the bound value. |
EventCallbacks
Name | Type | Description |
|---|---|---|
ValueChanged | EventCallback<TValue> | Gets or sets a callback that updates the bound value. |
Methods
Name | Parameters | Type | Description |
|---|---|---|---|
DisposeAsync | ValueTask | ||
FocusAsync | void | Exposes the elements FocusAsync(bool preventScroll) method. | |
FocusAsync | bool preventScroll | void | Exposes the elements FocusAsync(bool preventScroll) method. |
FluentSliderLabel<TValue> Class
Parameters
Name | Type | Default | Description |
|---|---|---|---|
ChildContent | RenderFragment? | Gets or sets the content to be rendered inside the component. | |
Disabled | bool? | Gets the disabled state of the label. This is controlled by the owning FluentSlider. | |
HideMark | bool? | Gets or sets a value indicating whether marks are hidden. | |
Position | TValue? | Gets or sets the value for this slider position. |
Methods
Name | Parameters | Type | Description |
|---|---|---|---|
DisposeAsync | ValueTask |