Slider

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 "@riversidevalley/fluid";

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.

Current value: 0

<script>
	import { Slider } from "@riversidevalley/fluid";

	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}
		<marquee>Custom HTML content!</marquee>
	</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.

<div style="block-size: 120px;">
	<Slider orientation="vertical" />
</div>

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

Name	Type	Default	Description
`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

This component uses $$restProps.

All unused props will be passed through to the underlying div element as regular attributes.

More Info

Slots

Name	Slot Props	Fallback
`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

Name	Detail
`change`	None