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.

Sets the minimum allowed distance between handles in a range slider. When pushy is true, moving a handle past this limit will push the other handle.

Only works when range is true

Sets the maximum allowed distance between handles in a range slider. When pushy is true, moving a handle past this limit will pull the other handle.

Only works when range is true

Enables dragging of the range area between handles. Setting the rangeGapMin and rangeGapMax to the same value (with draggy & pushy on) would simulate a fixed range.

Only works when range is true

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.

When true, shows the range values between the handles (e.g., “20 - 80”). Respects existing prefix and suffix properties.

Only works when range is true

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.

An array of values to limit the Slider handles to.

This should be two values (min/max) to limit the handles to

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

Add custom CSS classes to the slider element. Useful for custom styling or framework integration.

Pass CSS variables or styling directly to the slider.

Works alongside the existing class prop

Control the dark mode of the slider. Possible values are:

• false light mode (default)
• 'force' dark mode
• 'auto' system preference

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)

All formatters use @html to render so be careful with what you return

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)

All formatters use @html to render so be careful with what you return

A function to format the range float display. Takes two values and returns a string.

Only works when range is true and rangeFloat is true

All formatters use @html to render so be careful with what you return

Controls handle animations. When false, disables all animations on the slider handles for instant updates.

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

The number of decimal places to display for the Slider values.

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