Options (Props)

A default value to apply to the Slider.

A Slider with range property must use values instead

Array of values to apply on the Slider. If multiple values are provided, multiple handles will be rendered.

A Slider with range property set can only have two values max

Minimum value for the Slider
should be set to lower than max property

Maximum value for the Slider
should be set to higher than min property

Every nth value to allow handle to stop at. For example if the step is 5, then the handle will only stop at 5, 10, 15, 20, etc.

should be a positive value

Whether to show pips/notches on the Slider. The pips will be rendered at the pipstep value. Pips can be styled as necessary but by default sit below the Slider (Horizontal) like a gauge.

Every nth step to show a pip for. This has multiple defaults depending on min, max and step properties. A sensible default is chosen, but can be overridden.

should be a positive value

Whether to style as a range picker. Possible values are:

• false no range styling
• true styles like a range with a min and max
• min styles like a range going from min to value
• max styles like a range going from value to max

A Slider with range=min/max or range=true only have one or two values respectively.

If range is true, then this decides if one handle will push the other along. By default, the handles will not push each other along, they will block each other.

Set true to add a floating label above focussed handles. This is good for displaying the current value of the Slider while interacting with it.

Make the Slider render vertically (lower value on bottom)

Whether to show a pip or label for the first value on Slider. Possible values are:

• false the first value in the Slider will not have a pip or label
• pip a pip (only) will be shown for the first value
• label label (and pip) is shown on the first value

Whether to show a pip or label for the last value on Slider. Possible values are:

• false the last value in the Slider will not have a pip or label
• pip a pip (only) will be shown for the last value
• label label (and pip) is shown on the last value

Whether to show a pip or label for all values except first & last. Possible values are:

• false the middle values in the Slider will not have a pip or label
• pip a pip (only) will be shown for the middle values
• label label (and pip) is shown on the middle values

Whether to show a pip or label for every value. Possible values are:

• false all values in the Slider will not have a pip or label
• pip a pip (only) will be shown for all values
• label label (and pip) is shown on all values

The same as combining first, last and rest.

A simple string to prepend to all displayed values

For more complex prefixes, use the formatter property

A simple string to append to all displayed values

For more complex suffixes, use the formatter property

Reverse the orientation of min/max

Whether hover styles are enabled for both handles and pips/values

Determine if the Slider is disabled, or enabled

Give the Slider a unique ID for use in styling

An array of strings to use for the aria-label attribute on the handles.

The array should be the same length as the values array.

A function to format the value of the Slider. Should return a String value.

function arguments are: v(value), i(handle index), p(percent)

A function to re-format values on the handle/float before they are displayed. Defaults to the same function given to the formatter property.

function arguments are: v(value), i(handle index), p(percent)

Svelte spring physics object to change the behaviour of the handle when moving.

Set to both to 1 for basically no spring effect

DOM reference for binding to the main <div /> of the component.
e.g. bind:slider={ref}

Useful for doing any kind of manipulation at mount time