bits-ui 1.3.15 → 1.3.16

package/dist/bits/slider/slider.svelte.d.ts

@@ -18,6 +18,8 @@ declare class SliderBaseRootState {
     direction: "rl" | "lr" | "tb" | "bt";
     constructor(opts: SliderBaseRootStateProps);
     getAllThumbs: () => HTMLElement[];
+    getThumbScale: () => [number, number];
+    getPositionFromValue: (thumbValue: number) => number;
     props: {
         readonly id: string;
         readonly "data-orientation": "horizontal" | "vertical";
@@ -46,7 +48,6 @@ declare class SliderSingleRootState extends SliderBaseRootState {
     handlePointerMove: (e: PointerEvent) => void;
     handlePointerDown: (e: PointerEvent) => void;
     handlePointerUp: () => void;
-    getPositionFromValue: (thumbValue: number) => number;
     thumbsPropsArr: {
         readonly role: "slider";
         readonly "aria-valuemin": number;
@@ -98,7 +99,6 @@ declare class SliderMultiRootState extends SliderBaseRootState {
     handlePointerMove: (e: PointerEvent) => void;
     handlePointerDown: (e: PointerEvent) => void;
     handlePointerUp: () => void;
-    getPositionFromValue: (thumbValue: number) => number;
     getAllThumbs: () => HTMLElement[];
     updateValue: (thumbValue: number, idx: number) => void;
     thumbsPropsArr: {

package/dist/bits/slider/slider.svelte.js

@@ -11,7 +11,7 @@ import { getAriaDisabled, getAriaOrientation, getDataDisabled, getDataOrientatio
 import { kbd } from "../../internal/kbd.js";
 import { isElementOrSVGElement } from "../../internal/is.js";
 import { isValidIndex } from "../../internal/arrays.js";
-import { snapValueToStep } from "../../internal/math.js";
+import { linearScale, snapValueToStep } from "../../internal/math.js";
 const SLIDER_ROOT_ATTR = "data-slider-root";
 const SLIDER_THUMB_ATTR = "data-slider-thumb";
 const SLIDER_RANGE_ATTR = "data-slider-range";
@@ -42,6 +42,32 @@ class SliderBaseRootState {
             return [];
         return Array.from(node.querySelectorAll(`[${SLIDER_THUMB_ATTR}]`));
     };
+    getThumbScale = () => {
+        const isVertical = this.opts.orientation.current === "vertical";
+        // this assumes all thumbs are the same width
+        const activeThumb = this.getAllThumbs()[0];
+        const thumbSize = isVertical ? activeThumb?.offsetHeight : activeThumb?.offsetWidth;
+        // if thumb size is undefined or 0, fallback to a 0-100 scale
+        if (thumbSize === undefined || Number.isNaN(thumbSize) || thumbSize === 0)
+            return [0, 100];
+        const trackSize = isVertical
+            ? this.opts.ref.current?.offsetHeight
+            : this.opts.ref.current?.offsetWidth;
+        // if track size is undefined or 0, fallback to a 0-100 scale
+        if (trackSize === undefined || Number.isNaN(trackSize) || trackSize === 0)
+            return [0, 100];
+        // the padding on either side
+        // half the width of the thumb
+        const percentPadding = (thumbSize / 2 / trackSize) * 100;
+        const min = percentPadding;
+        const max = 100 - percentPadding;
+        return [min, max];
+    };
+    getPositionFromValue = (thumbValue) => {
+        const thumbScale = this.getThumbScale();
+        const scale = linearScale([this.opts.min.current, this.opts.max.current], thumbScale);
+        return scale(thumbValue);
+    };
     props = $derived.by(() => ({
         id: this.opts.id.current,
         "data-orientation": getDataOrientation(this.opts.orientation.current),
@@ -169,16 +195,11 @@ class SliderSingleRootState extends SliderBaseRootState {
         }
         this.isActive = false;
     };
-    getPositionFromValue = (thumbValue) => {
-        const min = this.opts.min.current;
-        const max = this.opts.max.current;
-        return ((thumbValue - min) / (max - min)) * 100;
-    };
     thumbsPropsArr = $derived.by(() => {
         const currValue = this.opts.value.current;
         return Array.from({ length: 1 }, () => {
             const thumbValue = currValue;
-            const thumbPosition = this.getPositionFromValue(thumbValue ?? 0);
+            const thumbPosition = this.getPositionFromValue(thumbValue);
             const style = getThumbStyles(this.direction, thumbPosition);
             return {
                 role: "slider",
@@ -209,10 +230,11 @@ class SliderSingleRootState extends SliderBaseRootState {
         const currValue = this.opts.value.current;
         return Array.from({ length: count }, (_, i) => {
             const tickPosition = i * (step / difference) * 100;
+            const scale = linearScale([this.opts.min.current, this.opts.max.current], this.getThumbScale());
             const isFirst = i === 0;
             const isLast = i === count - 1;
             const offsetPercentage = isFirst ? 0 : isLast ? -100 : -50;
-            const style = getTickStyles(this.direction, tickPosition, offsetPercentage);
+            const style = getTickStyles(this.direction, scale(tickPosition), offsetPercentage);
             const tickValue = min + i * step;
             const bounded = tickValue <= currValue;
             return {
@@ -379,11 +401,6 @@ class SliderMultiRootState extends SliderBaseRootState {
         }
         this.isActive = false;
     };
-    getPositionFromValue = (thumbValue) => {
-        const min = this.opts.min.current;
-        const max = this.opts.max.current;
-        return ((thumbValue - min) / (max - min)) * 100;
-    };
     getAllThumbs = () => {
         const node = this.opts.ref.current;
         if (!node)

package/dist/internal/math.d.ts

@@ -2,3 +2,4 @@
  * From https://github.com/melt-ui/melt-ui/blob/main/packages/svelte/src/lib/internal/math.ts
  */
 export declare function snapValueToStep(value: number, min: number, max: number, step: number): number;
+export declare function linearScale(domain: [number, number], range: [number, number], clamp?: boolean): (x: number) => number;

package/dist/internal/math.js

@@ -26,3 +26,18 @@ export function snapValueToStep(value, min, max, step) {
     }
     return snappedValue;
 }
+export function linearScale(domain, range, clamp = true) {
+    const [d0, d1] = domain;
+    const [r0, r1] = range;
+    const slope = (r1 - r0) / (d1 - d0);
+    return (x) => {
+        const result = r0 + slope * (x - d0);
+        if (!clamp)
+            return result;
+        if (result > Math.max(r0, r1))
+            return Math.max(r0, r1);
+        if (result < Math.min(r0, r1))
+            return Math.min(r0, r1);
+        return result;
+    };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bits-ui",
-  "version": "1.3.15",
+  "version": "1.3.16",
   "license": "MIT",
   "repository": "github:huntabyte/bits-ui",
   "funding": "https://github.com/sponsors/huntabyte",