Features

!Features of the range slider plugin (written below)

- ✨ fully customisable
- ♿ accessible
- 👍🏽 multi-thumb
- 🎚 ranges
- 🏷 floating labels
- 📏 ruler values (pips)
- 🏷 labels for values
- 🧮 step function
- 🖍 formatter
- 🎭 animated
- 🖋 css variables

Install

Open your project and use the command line to install the package;

``bash
yarn add svelte-range-slider-pips --dev # or
npm install svelte-range-slider-pips --save-dev # if you prefer npm
`

Usage

$3

> Note: Please read the upgrade guide for details, as there's some changes which might break your styling/ui.

$3

Assuming you have a Svelte app up and running;

`svelte



`

• 
  see test folder for examples of usage with Svelte 4
  


• 
  or Svelte 5
  

---

$3

Svelte 5 works almost exactly the same as Svelte 4.

⚠ Note: Runes Mode -- specifically $state() -- has some issues when binding with an element.
My suggestion would be to use legacy mode if you can (not runes), or read this issue for a workaround.

---

$3

⚠ _Version 3 of Range Slider Pips is not compatible with Svelte 3. see below_

$3

If you're not building a svelte-app, you can use the /dist/
version of the script /dist/svelte-range-slider-pips.js and include it
with a regular
`

• see examples of usage with Vanilla JS
  


• or running with jQuery
  

---

$3

If you're building a bleeding-edge JS application (maybe Vue or React), you might
want to use js imports (import)

`js
import RangeSlider from './node_modules/svelte-range-slider-pips/dist/svelte-range-slider-pips.mjs';

var mySlider = new RangeSlider({
target: node, // js reference to a DOM element
props: { values: [50], pips: true }
});
`

• see examples of usage with ES modules
  


• or usage with VueJS
  


• or importing with ReactJS
  

---

Props (options)

$3

| prop | type | default | description |
| ------------------- | -------------------------- | ----------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| value | Number | 50 | Value to apply on the slider. |
| values | Array | [50] | Array of values to apply on the slider. Multiple values creates multiple handles. (_note: A slider with range property set can only have two values max_) |
| min | Number | 0 | Minimum value for the slider _(should be < max)_ |
| max | Number | 100 | Maximum value for the slider _(should be > min)_ |
| step | Number | 1 | Every nth value to allow handle to stop at _(should be a positive value)_ |
| range | Boolean/String | false | Whether to style as a range picker. Use range='min' or range='max' for min/max variants |
| pushy | Boolean | false | If range is true, then this boolean decides if one handle will push the other along |
| draggy | Boolean | false | If range is true, enables dragging the range area between handles |
| rangeGapMin | Number | 0 | If range is true, sets the minimum allowed distance between handles |
| rangeGapMax | Number | Infinity | If range is true, sets the maximum allowed distance between handles |
| float | Boolean | false | Set true to add a floating label above focussed handles |
| rangeFloat | Boolean | false | If range is true, shows the range values between handles |
| vertical | Boolean | false | Make the slider render vertically (lower value on bottom) |
| pips | Boolean | false | Whether to show pips/notches on the slider |
| pipstep | Number | 1/10/20 | Every nth step to show a pip for. This has multiple defaults depending on values property |
| first | Boolean/String | false | Whether to show a pip or label for the first value on slider. Use first='label' to show a label value |
| last | Boolean/String | false | Whether to show a pip or label for the last value on slider. Use last='label' to show a label value |
| rest | Boolean/String | false | Whether to show a pip or label for all other values. Use rest='label' to show a label value |
| all | Boolean/String | false | Whether to show a pip or label for all values. Same as combining first, last and rest. Use all='label' to show a label value |
| prefix | String | "" | A string to prefix to all displayed values |
| suffix | String | "" | A string to suffix to all displayed values |
| limits | Array | [0, 100] | An array of two numbers to set a limit on the handles. This overrides min and max if set, while still using them for the range display. |
| reversed | Boolean | false | Reverse the orientation of min/max |
| hoverable | Boolean | true | Whether hover styles are enabled for both handles and pips/values |
| disabled | Boolean | false | Determine if the slider is disabled, or enabled _(only disables interactions, and events)_ |
| id | String | "" | Give the slider a unique ID for use in styling |
| class | String | "" | Add custom CSS classes to the slider |
| style | String | undefined | Pass CSS variables or style declarations directly to the slider |
| darkmode | False/"auto"/"force" | false | Set to "auto" to automatically detect the system's dark mode, or "light" or "dark" to force a specific mode |
| ariaLabels | Array | [] | Array of strings to use for the aria-label attribute on the handles. |
| formatter | Function | (v,i,p) => v | A function to re-format values before they are displayed (v = value, i = pip index, p = percent) |
| handleFormatter | Function | formatter | A function to re-format values on the handle/float before they are displayed. Defaults to the same function given to the formatter property (v = value, i = handle index, p = percent) |
| rangeFormatter | Function | null | A function to re-format range float values (v1 = first value, v2 = second value, p1 = first percent, p2 = second percent) |
| spring | Boolean | true | Whether to enable spring animations on handles |
| springValues | Object | { stiffness: 0.15, damping: 0.4 } | Svelte spring physics object to change the behaviour of the handle when moving |
| precision | Number | 2 | Precision of the values for fixing floating errors |
| slider | Element | undefined | DOM reference for binding to the main