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.

View Code

<Slider value={20} min={0} max={50} step={5} />

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.

View Code

<Slider value={50} step={25} ticks={[0, 25, 50, 75, 100]} />

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.

View Code

<Slider value={40} orientation="vertical" />

Disabled

Set the disabled prop to prevent interaction with the slider.

View Code

<Slider value={30} disabled />

Component Props

Name	Type	Default	Description
`value` bindable	`number`	`0`	The current value of the slider.
`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.
`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.
`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.
`onChange`	`(value: number) => void`		Called whenever the value changes.
`class`	`string`		The class to apply to the slider.
`ref` bindable	`HTMLElement`		The DOM reference of the slider element.
`inputRef` bindable	`HTMLInputElement`		The DOM reference of the underlying input element.
`thumbRef` bindable	`HTMLElement`		The DOM reference of the thumb element.
`tooltipRef` bindable	`HTMLElement`		The DOM reference of the tooltip element.
`railRef` bindable	`HTMLElement`		The DOM reference of the rail element.
`trackRef` bindable	`HTMLElement`		The DOM reference of the track element.
`tickBarRef` bindable	`HTMLElement`		The DOM reference of the tick bar element.
Element Attributes (`div`)