Slider

Edit This Page

A slider is a control that lets the user select from a range of values by moving a thumb control along a track.

import { Slider } from "fluent-svelte";

Usage

Controlling Value

By default, sliders are created with a value of 0. This starts the slider thumb at 0% of the track. You can set the initial value of the slider by setting the value property.

<Slider value={20} />

Additionally, you can use svelte’s two-way binding syntax to bind the value to a variable.

<script>
	import { Slider } from "fluent-svelte";

	let value = 0;
</script>

<Slider bind:value />

Current value: {value}

Minimum and Maximum Values

Sliders can normally only take in values ranging from 0 to 100. This can be changed by setting the min and max properties.

<Slider min={100} max={500} value={250} />

Step

A step property can be set to control the granularity of the slider. For example, if you set the step to 10, the slider will only allow values that are multiples of 10. The default step of 1 means that the slider can take any whole-number value.

<Slider step={10} />

Using Ticks

Slider ticks are small markers along the slider rail that mark a significant value. Ticks are purely visual, and do not alter user interaction. You can add slider ticks by passing an array of numbers within the slider’s value range into the ticks property:

<Slider ticks={[0, 50, 100]} />

You can also customize the appearance of the slider’s ticks. The tickPlacement property will control how the ticks are displayed on the slider rail. The default value is around, which shows the ticks at both sides of the rail vertically. Tick placement can be either around, before, or after.

Tooltips

All sliders are accompanied by a tooltip that displays the current value of the slider. If you do not wish to display a tooltip, you can set the tooltip property to false.

<Slider tooltip={false} />

Tooltip text can also be customized through the prefix and suffix properties, which will add a string respectively before or after the tooltip’s text. This is useful if you want to convey units of measurement or other information about the slider’s value.

<Slider prefix="$" />
<Slider suffix=" meters" />

If you require further tooltip configuration, the tooltip’s content can also be entirely overrided with your own using the tooltip slot.

The tooltip slot has three slot props: value, prefix and suffix which grant you access to the current value and the prefix/suffix strings respectively.

<Slider>
    <svelte:fragment slot="tooltip" let:value let:prefix let:suffix>
        {prefix}{value}{suffix}
        <h1>
            Custom HTML content!
        </h1>
    </svelte:fragment>
</Slider>

Direction and Orientation

Sliders can be displayed in either a horizontal (left and right) or vertical orientation (up and down). By default, sliders are displayed in a horizontal orientation. You can change this by setting the orientation property to vertical.

<Slider orientation="vertical" />

Slider tracks can also be reversed using the reverse property. This will change the direction of the slider’s track. For example, if the slider is horizontal and the reverse property is set to true, the track will be displayed from right to left.

<Slider reverse />

Trackless Sliders

A slider’s fill indication can be removed by setting the track property to false. This will only hide the track, not the rail or thumb.

Disabled Sliders

If the slider is not meant to be clicked, you can use the disabled property to visually indicate this. If a slider is disabled, it will be unclickable.

Component API

API docs automatically generated by sveld and vite-plugin-sveld.

Props

NameTypeDefaultDescription
value number 0 The slider's current value.
min number 0 The minimum value of the slider.
max number 100 The maximum value of the slider.
step number 1 Determines how much the slider's value should increase per step.
ticks [] [] Determines the position of slider ticks along the min and max of the track.
tickPlacement string "around" Determines the placement of slider ticks around the track.
tooltip boolean true Determines if the slider's value tooltip will be shown.
prefix string "" Text placed before the slider's value tooltip.
suffix string "" Text placed after the slider's value tooltip.
track boolean true Determines if the slider's fill track will be visible or not.
orientation string "horizontal" Determines the slider's orientation.
reverse boolean false Determines if the slider track will be in reverse direction.
disabled boolean false Controls whether the slider is disabled.
inputElement null | HTMLInputElement null Obtains a bound DOM reference to the slider's input element.
containerElement null | HTMLDivElement null Obtains a bound DOM reference to the slider's outer container element.
tickBarElement null | HTMLDivElement null Obtains a bound DOM reference to the slider's tick container element.
thumbElement null | HTMLDivElement null Obtains a bound DOM reference to the slider's thumb element.
railElement null | HTMLDivElement null Obtains a bound DOM reference to the slider's outer rail element.
trackElement null | HTMLDivElement null Obtains a bound DOM reference to the slider's track (fill) element.
stepUp () => any () => { value += step; if (value > max) value = max; } None
stepDown () => any () => { value -= step; if (value < min) value = min; } None

Slots

NameSlot PropsFallback
tooltip { prefix: string, suffix: string, value: number } {prefix}{value}{suffix}

Events

All DOM events are forwarded to this component's respective elements by default. Learn More

Dispatched Events

None