svelte-range-slider-pips

Keyboard navigation has been refined for better precision and alignment with the step value:

• Ctrl/Cmd + Arrow: Moves the handle by 1% of the total range.
• Shift + Arrow or PageUp/PageDown: Moves the handle by 10% of the total range.
• PageUp: Moves the handle up/right.
• PageDown: Moves the handle down/left.

All movements respect the step and precision settings.

<RangeSlider
  min={0}
  max={100}
  step={1}
  // Ctrl/Cmd + Arrow moves by 1 unit
  // Shift + Arrow or PageUp/PageDown moves by 10 units
/>

Hover effects are now strictly controlled by both the hoverable and disabled properties. Hover effects (on handles or the range bar) will only be visible if hoverable is true AND disabled is false.

<RangeSlider
  hoverable={true}
  disabled={true}  // Hover effects will not show
/>

<RangeSlider
  hoverable={true}
  disabled={false} // Hover effects will show
/>

To upgrade to version 4, update your package manager dependencies. Note that v4 introduces breaking changes regarding CSS class names, which are now prefixed with rs to prevent conflicts. If you use custom CSS selectors or JavaScript to manipulate component classes, you must update them. All previous CSS variable names remain valid.

npm install svelte-range-slider-pips@4
# or
yarn add svelte-range-slider-pips@4
# or
pnpm add svelte-range-slider-pips@4

In v4, handles and range bars use CSS translate instead of left/right positioning. The component now uses internal CSS custom properties to control positions:

• Handles: --handle-pos
• Range: --range-start, --range-end, and --range-size.

If you have written custom CSS to position these elements, you will need to update your code to use these properties or the new translate logic.

In v4, the component switched from transform: translate() to the modern translate property and added 3D transforms for hardware acceleration. If you have custom CSS targeting float elements, you must update your selectors.

Example Update:

/* Before (v3) */
.rangeSlider .rangeHandle.active .rangeFloat {
  transform: translate(-50%, -10px);
}

/* After (v4) */
.rangeSlider .rangeHandle.rsActive .rangeFloat {
  translate: -50% -10px 0.01px;
}

Svelte 5 usage is almost identical to Svelte 4.

Warning regarding Runes Mode: Using $state() for binding with the <input /> element can cause issues. It is recommended to use legacy mode (non-runes) or check the GitHub issue #174 for a workaround.

Install the package using npm or yarn as a development dependency.

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

The current version of svelte-range-slider-pips is incompatible with Svelte 3. If your project is stuck on Svelte 3 and you cannot upgrade to Svelte 4 or 5, you should use version 2.3.1. This version is considered robust and will not receive further updates.

To install the compatible version, use the following commands:

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

When upgrading from v3 to v4, follow these steps to ensure your custom styles and logic remain functional:

1. Update CSS Selectors: Change any custom CSS targeting component state or modifier classes to use the new rs prefixed names (e.g., .pip.selected becomes .rsPip.rsSelected).
2. Update JavaScript Queries: If you use JS to query or manipulate component elements, update the class names in your queries to include the rs prefix.
3. Review CSS Frameworks: Check if any CSS framework configurations were targeting the old, non-prefixed class names.
4. Test Component: Thoroughly test the slider to ensure all styles and animations behave as expected.

In modern JavaScript applications using ES modules, you can import the .mjs distribution file. Initialize the slider by calling the RangeSlider constructor with a target (a DOM element reference) and a props object.

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 }
});