npm / svelte-range-slider-pips
svelte-range-slider-pips
What changed in svelte-range-slider-pips 3 to 4, from its official release notes, upgrade guides and advisories. Sources checked 2026-10-29.
33 breaking10 new APIs and options4 behavior and defaults1 tooling2 fixes and other
See which of these apply to your code, ranked, in your agent:
npx @unstale/cli initsvelte-range-slider-pips 449 changes
Breaking changes 33
Range-drag event payloads set activeHandle to -1 to indicate a range drag.
Handle positioning is controlled internally with the --handle-pos CSS custom property instead of left/right positioning.
When min is greater than or equal to max, values reset to 0 and 100 and a console error is logged.
Range positioning is controlled internally with the --range-end CSS custom property.
Range positioning is controlled internally with the --range-size CSS custom property.
Range positioning is controlled internally with the --range-start CSS custom property.
The active handle class replaces active; update custom CSS selectors and JavaScript queries that target the old class.
The disabled state class replaces disabled; update custom CSS selectors and JavaScript queries that target the old class.
The range drag class replaces rangeDrag; update custom CSS selectors and JavaScript queries that target the old class.
The focus state class replaces focus; update custom CSS selectors and JavaScript queries that target the old class.
The hoverable state class replaces hoverable; update custom CSS selectors and JavaScript queries that target the old class.
The in-range pip class replaces in-range; update custom CSS selectors and JavaScript queries that target the old class.
The max state class replaces max; update custom CSS selectors and JavaScript queries that target the old class.
The min state class replaces min; update custom CSS selectors and JavaScript queries that target the old class.
The out-of-limit pip class replaces out-of-limit; update custom CSS selectors and JavaScript queries that target the old class.
The base pip class replaces pip; update custom CSS selectors and JavaScript queries that target the old class.
The first-pip class replaces pip--first; update custom CSS selectors and JavaScript queries that target the old class.
The last-pip class replaces pip--last; update custom CSS selectors and JavaScript queries that target the old class.
The pip-labels state class replaces pip-labels; update custom CSS selectors and JavaScript queries that target the old class.
The pips state class replaces pips; update custom CSS selectors and JavaScript queries that target the old class.
The pip value display class replaces pipVal; update custom CSS selectors and JavaScript queries that target the old class.
The pip value prefix class replaces pipVal-prefix; update custom CSS selectors and JavaScript queries that target the old class.
The pip value suffix class replaces pipVal-suffix; update custom CSS selectors and JavaScript queries that target the old class.
The pressed handle class replaces press; update custom CSS selectors and JavaScript queries that target the old class.
The range state class replaces range; update custom CSS selectors and JavaScript queries that target the old class.
The range float prefix class replaces rangeFloat-prefix; update custom CSS selectors and JavaScript queries that target the old class.
The range float suffix class replaces rangeFloat-suffix; update custom CSS selectors and JavaScript queries that target the old class.
The reversed state class replaces reversed; update custom CSS selectors and JavaScript queries that target the old class.
The selected pip class replaces selected; update custom CSS selectors and JavaScript queries that target the old class.
The vertical state class replaces vertical; update custom CSS selectors and JavaScript queries that target the old class.
Range-drag change and stop events provide the initial positions of both handles in startValue.
Float positioning now uses the CSS translate property instead of transform: translate(); custom float positioning CSS may need updating.
Range-drag start, change, and stop events provide both handle positions in values.
New APIs and options 10
Adds custom CSS classes to the base slider element alongside its internal classes.
The color system adds light and dark theme variables for theming; existing CSS variable overrides remain supported.
Controls dark mode with false for light mode, auto to follow the system color scheme, or force for dark mode.
Enables dragging the range area between handles; it only works on range sliders and defaults to false.
Displays the range values between the handles and respects existing prefix and suffix properties.
Provides custom formatting for the range float display through a function receiving values and percentages.
Sets the maximum allowed distance between handles in a range slider.
Sets the minimum allowed distance between handles in a range slider.
Controls handle animations, defaults to true, and disables animations when false.
Allows CSS declarations and variables to be passed directly for styling and dynamic theme changes.
Behavior and default changes 4
When multiple handles are used and ariaLabels is not an array, it is converted to an empty array and a console warning is logged.
Hover effects on handles and the range bar show only when hoverable is true and the slider is not disabled.
Range-drag change events provide the previous positions of both handles in previousValue.
The range bar has smoother transitions with subtle transitions on hover.
Fixes and other changes 2
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.
Precision is now properly respected in all calculations.
svelte-range-slider-pips 31 changes
Tooling 1
TypeScript types are now included, allowing developers to use types with the package.