# What changed in svelte-range-slider-pips

> 50 changes in svelte-range-slider-pips 3 to 4 from its official release notes, upgrade guides and advisories: 33 breaking, 10 new APIs and options. Each one cited. Sources checked 2026-10-29. HTML: https://unstale.sh/npm/svelte-range-slider-pips/

To see which of these apply to a repository, run `npx @unstale/cli init` in it.

## svelte-range-slider-pips 4

### Breaking changes

- Range-drag event payloads set activeHandle to -1 to indicate a range drag. (4.0.0) — [upgrade guide](https://github.com/simeydotme/svelte-range-slider-pips/blob/HEAD/docs/upgrade.md)
- Handle positioning is controlled internally with the --handle-pos CSS custom property instead of left/right positioning. (4.0.0) — [upgrade guide](https://github.com/simeydotme/svelte-range-slider-pips/blob/HEAD/docs/upgrade.md)
- When min is greater than or equal to max, values reset to 0 and 100 and a console error is logged. (4.0.0) — [upgrade guide](https://github.com/simeydotme/svelte-range-slider-pips/blob/HEAD/docs/upgrade.md)
- Range positioning is controlled internally with the --range-end CSS custom property. (4.0.0) — [upgrade guide](https://github.com/simeydotme/svelte-range-slider-pips/blob/HEAD/docs/upgrade.md)
- Range positioning is controlled internally with the --range-size CSS custom property. (4.0.0) — [upgrade guide](https://github.com/simeydotme/svelte-range-slider-pips/blob/HEAD/docs/upgrade.md)
- Range positioning is controlled internally with the --range-start CSS custom property. (4.0.0) — [upgrade guide](https://github.com/simeydotme/svelte-range-slider-pips/blob/HEAD/docs/upgrade.md)
- The active handle class replaces active; update custom CSS selectors and JavaScript queries that target the old class. (4.0.0) — [upgrade guide](https://github.com/simeydotme/svelte-range-slider-pips/blob/HEAD/docs/upgrade.md)
- The disabled state class replaces disabled; update custom CSS selectors and JavaScript queries that target the old class. (4.0.0) — [upgrade guide](https://github.com/simeydotme/svelte-range-slider-pips/blob/HEAD/docs/upgrade.md)
- The range drag class replaces rangeDrag; update custom CSS selectors and JavaScript queries that target the old class. (4.0.0) — [upgrade guide](https://github.com/simeydotme/svelte-range-slider-pips/blob/HEAD/docs/upgrade.md)
- The focus state class replaces focus; update custom CSS selectors and JavaScript queries that target the old class. (4.0.0) — [upgrade guide](https://github.com/simeydotme/svelte-range-slider-pips/blob/HEAD/docs/upgrade.md)
- The hoverable state class replaces hoverable; update custom CSS selectors and JavaScript queries that target the old class. (4.0.0) — [upgrade guide](https://github.com/simeydotme/svelte-range-slider-pips/blob/HEAD/docs/upgrade.md)
- The in-range pip class replaces in-range; update custom CSS selectors and JavaScript queries that target the old class. (4.0.0) — [upgrade guide](https://github.com/simeydotme/svelte-range-slider-pips/blob/HEAD/docs/upgrade.md)
- The max state class replaces max; update custom CSS selectors and JavaScript queries that target the old class. (4.0.0) — [upgrade guide](https://github.com/simeydotme/svelte-range-slider-pips/blob/HEAD/docs/upgrade.md)
- The min state class replaces min; update custom CSS selectors and JavaScript queries that target the old class. (4.0.0) — [upgrade guide](https://github.com/simeydotme/svelte-range-slider-pips/blob/HEAD/docs/upgrade.md)
- The out-of-limit pip class replaces out-of-limit; update custom CSS selectors and JavaScript queries that target the old class. (4.0.0) — [upgrade guide](https://github.com/simeydotme/svelte-range-slider-pips/blob/HEAD/docs/upgrade.md)
- The base pip class replaces pip; update custom CSS selectors and JavaScript queries that target the old class. (4.0.0) — [upgrade guide](https://github.com/simeydotme/svelte-range-slider-pips/blob/HEAD/docs/upgrade.md)
- The first-pip class replaces pip--first; update custom CSS selectors and JavaScript queries that target the old class. (4.0.0) — [upgrade guide](https://github.com/simeydotme/svelte-range-slider-pips/blob/HEAD/docs/upgrade.md)
- The last-pip class replaces pip--last; update custom CSS selectors and JavaScript queries that target the old class. (4.0.0) — [upgrade guide](https://github.com/simeydotme/svelte-range-slider-pips/blob/HEAD/docs/upgrade.md)
- The pip-labels state class replaces pip-labels; update custom CSS selectors and JavaScript queries that target the old class. (4.0.0) — [upgrade guide](https://github.com/simeydotme/svelte-range-slider-pips/blob/HEAD/docs/upgrade.md)
- The pips state class replaces pips; update custom CSS selectors and JavaScript queries that target the old class. (4.0.0) — [upgrade guide](https://github.com/simeydotme/svelte-range-slider-pips/blob/HEAD/docs/upgrade.md)
- The pip value display class replaces pipVal; update custom CSS selectors and JavaScript queries that target the old class. (4.0.0) — [upgrade guide](https://github.com/simeydotme/svelte-range-slider-pips/blob/HEAD/docs/upgrade.md)
- The pip value prefix class replaces pipVal-prefix; update custom CSS selectors and JavaScript queries that target the old class. (4.0.0) — [upgrade guide](https://github.com/simeydotme/svelte-range-slider-pips/blob/HEAD/docs/upgrade.md)
- The pip value suffix class replaces pipVal-suffix; update custom CSS selectors and JavaScript queries that target the old class. (4.0.0) — [upgrade guide](https://github.com/simeydotme/svelte-range-slider-pips/blob/HEAD/docs/upgrade.md)
- The pressed handle class replaces press; update custom CSS selectors and JavaScript queries that target the old class. (4.0.0) — [upgrade guide](https://github.com/simeydotme/svelte-range-slider-pips/blob/HEAD/docs/upgrade.md)
- The range state class replaces range; update custom CSS selectors and JavaScript queries that target the old class. (4.0.0) — [upgrade guide](https://github.com/simeydotme/svelte-range-slider-pips/blob/HEAD/docs/upgrade.md)
- The range float prefix class replaces rangeFloat-prefix; update custom CSS selectors and JavaScript queries that target the old class. (4.0.0) — [upgrade guide](https://github.com/simeydotme/svelte-range-slider-pips/blob/HEAD/docs/upgrade.md)
- The range float suffix class replaces rangeFloat-suffix; update custom CSS selectors and JavaScript queries that target the old class. (4.0.0) — [upgrade guide](https://github.com/simeydotme/svelte-range-slider-pips/blob/HEAD/docs/upgrade.md)
- The reversed state class replaces reversed; update custom CSS selectors and JavaScript queries that target the old class. (4.0.0) — [upgrade guide](https://github.com/simeydotme/svelte-range-slider-pips/blob/HEAD/docs/upgrade.md)
- The selected pip class replaces selected; update custom CSS selectors and JavaScript queries that target the old class. (4.0.0) — [upgrade guide](https://github.com/simeydotme/svelte-range-slider-pips/blob/HEAD/docs/upgrade.md)
- The vertical state class replaces vertical; update custom CSS selectors and JavaScript queries that target the old class. (4.0.0) — [upgrade guide](https://github.com/simeydotme/svelte-range-slider-pips/blob/HEAD/docs/upgrade.md)
- Range-drag change and stop events provide the initial positions of both handles in startValue. (4.0.0) — [upgrade guide](https://github.com/simeydotme/svelte-range-slider-pips/blob/HEAD/docs/upgrade.md)
- Float positioning now uses the CSS translate property instead of transform: translate(); custom float positioning CSS may need updating. (4.0.0) — [upgrade guide](https://github.com/simeydotme/svelte-range-slider-pips/blob/HEAD/docs/upgrade.md)
- Range-drag start, change, and stop events provide both handle positions in values. (4.0.0) — [upgrade guide](https://github.com/simeydotme/svelte-range-slider-pips/blob/HEAD/docs/upgrade.md)

### New APIs and options

- Adds custom CSS classes to the base slider element alongside its internal classes. (4.0.0) — [upgrade guide](https://github.com/simeydotme/svelte-range-slider-pips/blob/HEAD/docs/upgrade.md)
- The color system adds light and dark theme variables for theming; existing CSS variable overrides remain supported. (4.0.0) — [upgrade guide](https://github.com/simeydotme/svelte-range-slider-pips/blob/HEAD/docs/upgrade.md)
- Controls dark mode with false for light mode, auto to follow the system color scheme, or force for dark mode. (4.0.0) — [upgrade guide](https://github.com/simeydotme/svelte-range-slider-pips/blob/HEAD/docs/upgrade.md)
- Enables dragging the range area between handles; it only works on range sliders and defaults to false. (4.0.0) — [upgrade guide](https://github.com/simeydotme/svelte-range-slider-pips/blob/HEAD/docs/upgrade.md)
- Displays the range values between the handles and respects existing prefix and suffix properties. (4.0.0) — [upgrade guide](https://github.com/simeydotme/svelte-range-slider-pips/blob/HEAD/docs/upgrade.md)
- Provides custom formatting for the range float display through a function receiving values and percentages. (4.0.0) — [upgrade guide](https://github.com/simeydotme/svelte-range-slider-pips/blob/HEAD/docs/upgrade.md)
- Sets the maximum allowed distance between handles in a range slider. (4.0.0) — [upgrade guide](https://github.com/simeydotme/svelte-range-slider-pips/blob/HEAD/docs/upgrade.md)
- Sets the minimum allowed distance between handles in a range slider. (4.0.0) — [upgrade guide](https://github.com/simeydotme/svelte-range-slider-pips/blob/HEAD/docs/upgrade.md)
- Controls handle animations, defaults to true, and disables animations when false. (4.0.0) — [upgrade guide](https://github.com/simeydotme/svelte-range-slider-pips/blob/HEAD/docs/upgrade.md)
- Allows CSS declarations and variables to be passed directly for styling and dynamic theme changes. (4.0.0) — [upgrade guide](https://github.com/simeydotme/svelte-range-slider-pips/blob/HEAD/docs/upgrade.md)

### Behavior and default changes

- When multiple handles are used and ariaLabels is not an array, it is converted to an empty array and a console warning is logged. (4.0.0) — [upgrade guide](https://github.com/simeydotme/svelte-range-slider-pips/blob/HEAD/docs/upgrade.md)
- Hover effects on handles and the range bar show only when hoverable is true and the slider is not disabled. (4.0.0) — [upgrade guide](https://github.com/simeydotme/svelte-range-slider-pips/blob/HEAD/docs/upgrade.md)
- Range-drag change events provide the previous positions of both handles in previousValue. (4.0.0) — [upgrade guide](https://github.com/simeydotme/svelte-range-slider-pips/blob/HEAD/docs/upgrade.md)
- The range bar has smoother transitions with subtle transitions on hover. (4.0.0) — [upgrade guide](https://github.com/simeydotme/svelte-range-slider-pips/blob/HEAD/docs/upgrade.md)

### Fixes and other changes

- Ctrl/Cmd+Arrow moves by 1% and Shift+Arrow or PageUp/PageDown by 10% of the total range; movements align to step, and PageUp/PageDown directions are corrected. (4.0.0) — [upgrade guide](https://github.com/simeydotme/svelte-range-slider-pips/blob/HEAD/docs/upgrade.md)
- Precision is now properly respected in all calculations. (4.0.0) — [upgrade guide](https://github.com/simeydotme/svelte-range-slider-pips/blob/HEAD/docs/upgrade.md)

## svelte-range-slider-pips 3

### Tooling

- TypeScript types are now included, allowing developers to use types with the package. (3.0.0) — [release notes](https://github.com/simeydotme/svelte-range-slider-pips/releases/tag/3.0.0)