Slider
A slider lets users select a value from a continuous or discrete range by dragging a thumb along a track. It supports horizontal and vertical orientations, tick marks, a value tooltip and reverse direction.
Usage
<script>
import { Slider } from 'fluentui-svelte';
</script>
<Slider value={50} min={0} max={100} />Range and Step
Use the min, max and step props to control the range of values and the increment between them.
Ticks
Provide an array of values to the ticks prop to render tick marks along the track. Use tickPlacement to position them around, before or after the rail.
Vertical Orientation
Set orientation to vertical to lay the slider out vertically. Make sure the container has a defined height so the slider is visible.
Buffer
Set buffer to draw a second value on the rail, behind the track, such as how much of a media has loaded. It takes the scale of value and does not move the thumb.
Disabled
Set the disabled prop to prevent interaction with the slider.
Component Props
| Name | Type | Default | Description |
|---|---|---|---|
value bindable | number | 0 | The current value of the slider. |
defaultValue | number | min | The value a form reset returns the slider to. A range input without one would fall back to an empty value. |
min | number | 0 | The minimum value of the slider. |
max | number | 100 | The maximum value of the slider. |
step | number | 1 | How much the value moves on every step. |
ticks | number[] | [] | The values the tick marks are drawn at. |
tickPlacement | 'around' | 'before' | 'after' | 'around' | Where the tick marks sit relative to the rail. |
prefix | string | '' | Text prepended to the value in the tooltip. |
suffix | string | '' | Text appended to the value in the tooltip. |
track | boolean | true | Whether to fill the rail up to the current value. |
buffer | number | A second value drawn on the rail behind the track, such as how much of a media has loaded. It takes the scale of value and does not move the thumb. | |
orientation | 'horizontal' | 'vertical' | 'horizontal' | The direction the slider runs in. |
reverse | boolean | false | Runs the slider from the maximum to the minimum instead. |
disabled | boolean | false | Disables the user interaction. |
sync | boolean | Snaps the thumb to the pointer as soon as it is pressed, instead of stepping towards it. Without it, a value between two steps is drawn as it is, while the native input, and so the form, holds the nearest step. | |
tooltip | boolean | true | Whether to show the value in a tooltip while dragging. |
tooltipPlacement | Placement | 'top' | Where the tooltip is placed relative to the thumb. |
tooltipContent | string | Snippet | Component | Custom content for the tooltip, replacing the plain value. | |
tooltipPositionConfig | Partial<ComputePositionConfig> | The position configuration handed over to floating-ui for the tooltip, as in Tooltip. | |
onChange | (value: number) => void | Called whenever the value changes. | |
ref bindable | HTMLInputElement | null | The DOM reference of the native range input that holds the value and takes the keyboard focus. The other attributes of the slider are applied to it. | |
wrapperRef bindable | HTMLDivElement | null | The DOM reference of the element that draws the slider. | |
wrapperAttributes | HTMLAttributes | The attributes to spread on the element that draws the slider. | |
thumbRef bindable | HTMLElement | null | The DOM reference of the thumb element. | |
tooltipRef bindable | HTMLElement | null | The DOM reference of the tooltip element. | |
railRef bindable | HTMLElement | null | The DOM reference of the rail element. | |
trackRef bindable | HTMLElement | null | The DOM reference of the track element. | |
tickBarRef bindable | HTMLElement | null | The DOM reference of the tick bar element. | |
HiddenInputAttributes<HTMLInputAttributes> |