bits-ui 1.0.0-next.8 → 1.0.0-next.81

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

@@ -3,24 +3,22 @@
  * Abdelrahman (https://github.com/abdel-17)
  */
 import { untrack } from "svelte";
+import { executeCallbacks, onMountEffect, useRefById, } from "svelte-toolbelt";
+import { on } from "svelte/events";
+import { Context, watch } from "runed";
 import { getRangeStyles, getThumbStyles, getTickStyles } from "./helpers.js";
 import { getAriaDisabled, getAriaOrientation, getDataDisabled, getDataOrientation, } from "../../internal/attrs.js";
-import { useRefById } from "../../internal/useRefById.svelte.js";
 import { kbd } from "../../internal/kbd.js";
 import { isElementOrSVGElement } from "../../internal/is.js";
 import { isValidIndex } from "../../internal/arrays.js";
-import { addEventListener } from "../../internal/events.js";
-import { executeCallbacks } from "../../internal/executeCallbacks.js";
-import { createContext } from "../../internal/createContext.js";
 import { 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";
 const SLIDER_TICK_ATTR = "data-slider-tick";
-class SliderRootState {
+class SliderBaseRootState {
     id;
     ref;
-    value;
     disabled;
     orientation;
     min;
@@ -28,9 +26,7 @@ class SliderRootState {
     step;
     dir;
     autoSort;
-    activeThumb = $state(null);
     isActive = $state(false);
-    currentThumbIdx = $state(0);
     direction = $derived.by(() => {
         if (this.orientation.current === "horizontal") {
             return this.dir.current === "rtl" ? "rl" : "lr";
@@ -39,7 +35,6 @@ class SliderRootState {
             return this.dir.current === "rtl" ? "tb" : "bt";
         }
     });
-    onValueChangeEnd;
     constructor(props) {
         this.id = props.id;
         this.ref = props.ref;
@@ -50,21 +45,234 @@ class SliderRootState {
         this.step = props.step;
         this.dir = props.dir;
         this.autoSort = props.autoSort;
-        this.value = props.value;
-        this.onValueChangeEnd = props.onValueChangeEnd;
         useRefById({
             id: this.id,
             ref: this.ref,
         });
-        $effect(() => {
-            const unsub = executeCallbacks(addEventListener(document, "pointerdown", this.handlePointerDown), addEventListener(document, "pointerup", this.handlePointerUp), addEventListener(document, "pointermove", this.handlePointerMove), addEventListener(document, "pointerleave", this.handlePointerUp));
-            return unsub;
+    }
+    #touchAction = $derived.by(() => {
+        if (this.disabled.current)
+            return undefined;
+        return this.orientation.current === "horizontal" ? "pan-y" : "pan-x";
+    });
+    getAllThumbs = () => {
+        const node = this.ref.current;
+        if (!node)
+            return [];
+        return Array.from(node.querySelectorAll(`[${SLIDER_THUMB_ATTR}]`));
+    };
+    props = $derived.by(() => ({
+        id: this.id.current,
+        "data-orientation": getDataOrientation(this.orientation.current),
+        "data-disabled": getDataDisabled(this.disabled.current),
+        style: {
+            touchAction: this.#touchAction,
+        },
+        [SLIDER_ROOT_ATTR]: "",
+    }));
+}
+class SliderSingleRootState extends SliderBaseRootState {
+    value;
+    onValueCommit;
+    isMulti = false;
+    constructor(props) {
+        super(props);
+        this.value = props.value;
+        this.onValueCommit = props.onValueCommit;
+        onMountEffect(() => {
+            return executeCallbacks(on(document, "pointerdown", this.handlePointerDown), on(document, "pointerup", this.handlePointerUp), on(document, "pointermove", this.handlePointerMove), on(document, "pointerleave", this.handlePointerUp));
+        });
+        watch([
+            () => this.step.current,
+            () => this.min.current,
+            () => this.max.current,
+            () => this.value.current,
+        ], ([step, min, max, value]) => {
+            const isValidValue = (v) => {
+                const snappedValue = snapValueToStep(v, min, max, step);
+                return snappedValue === v;
+            };
+            const gcv = (v) => {
+                return snapValueToStep(v, min, max, step);
+            };
+            if (!isValidValue(value)) {
+                this.value.current = gcv(value);
+            }
         });
-        $effect(() => {
+    }
+    applyPosition({ clientXY, start, end }) {
+        const min = this.min.current;
+        const max = this.max.current;
+        const percent = (clientXY - start) / (end - start);
+        const val = percent * (max - min) + min;
+        if (val < min) {
+            this.updateValue(min);
+        }
+        else if (val > max) {
+            this.updateValue(max);
+        }
+        else {
             const step = this.step.current;
-            const min = this.min.current;
-            const max = this.max.current;
-            const value = this.value.current;
+            const currStep = Math.floor((val - min) / step);
+            const midpointOfCurrStep = min + currStep * step + step / 2;
+            const midpointOfNextStep = min + (currStep + 1) * step + step / 2;
+            const newValue = val >= midpointOfCurrStep && val < midpointOfNextStep
+                ? (currStep + 1) * step + min
+                : currStep * step + min;
+            if (newValue <= max) {
+                this.updateValue(newValue);
+            }
+        }
+    }
+    updateValue = (newValue) => {
+        this.value.current = snapValueToStep(newValue, this.min.current, this.max.current, this.step.current);
+    };
+    handlePointerMove = (e) => {
+        if (!this.isActive || this.disabled.current)
+            return;
+        e.preventDefault();
+        e.stopPropagation();
+        const sliderNode = this.ref.current;
+        const activeThumb = this.getAllThumbs()[0];
+        if (!sliderNode || !activeThumb)
+            return;
+        activeThumb.focus();
+        const { left, right, top, bottom } = sliderNode.getBoundingClientRect();
+        if (this.direction === "lr") {
+            this.applyPosition({
+                clientXY: e.clientX,
+                start: left,
+                end: right,
+            });
+        }
+        else if (this.direction === "rl") {
+            this.applyPosition({
+                clientXY: e.clientX,
+                start: right,
+                end: left,
+            });
+        }
+        else if (this.direction === "bt") {
+            this.applyPosition({
+                clientXY: e.clientY,
+                start: bottom,
+                end: top,
+            });
+        }
+        else if (this.direction === "tb") {
+            this.applyPosition({
+                clientXY: e.clientY,
+                start: top,
+                end: bottom,
+            });
+        }
+    };
+    handlePointerDown = (e) => {
+        if (e.button !== 0 || this.disabled.current)
+            return;
+        const sliderNode = this.ref.current;
+        const closestThumb = this.getAllThumbs()[0];
+        if (!closestThumb || !sliderNode)
+            return;
+        const target = e.target;
+        if (!isElementOrSVGElement(target) || !sliderNode.contains(target))
+            return;
+        e.preventDefault();
+        closestThumb.focus();
+        this.isActive = true;
+        this.handlePointerMove(e);
+    };
+    handlePointerUp = () => {
+        if (this.disabled.current)
+            return;
+        if (this.isActive) {
+            this.onValueCommit.current(untrack(() => this.value.current));
+        }
+        this.isActive = false;
+    };
+    getPositionFromValue = (thumbValue) => {
+        const min = this.min.current;
+        const max = this.max.current;
+        return ((thumbValue - min) / (max - min)) * 100;
+    };
+    thumbsPropsArr = $derived.by(() => {
+        const currValue = this.value.current;
+        return Array.from({ length: 1 }, () => {
+            const thumbValue = currValue;
+            const thumbPosition = this.getPositionFromValue(thumbValue ?? 0);
+            const style = getThumbStyles(this.direction, thumbPosition);
+            return {
+                role: "slider",
+                "aria-valuemin": this.min.current,
+                "aria-valuemax": this.max.current,
+                "aria-valuenow": thumbValue,
+                "aria-disabled": getAriaDisabled(this.disabled.current),
+                "aria-orientation": getAriaOrientation(this.orientation.current),
+                "data-value": thumbValue,
+                tabindex: this.disabled.current ? -1 : 0,
+                style,
+                [SLIDER_THUMB_ATTR]: "",
+            };
+        });
+    });
+    thumbsRenderArr = $derived.by(() => {
+        return this.thumbsPropsArr.map((_, i) => i);
+    });
+    ticksPropsArr = $derived.by(() => {
+        const max = this.max.current;
+        const min = this.min.current;
+        const step = this.step.current;
+        const difference = max - min;
+        let count = Math.ceil(difference / step);
+        if (difference % step == 0) {
+            count++;
+        }
+        const currValue = this.value.current;
+        return Array.from({ length: count }, (_, i) => {
+            const tickPosition = i * (step / difference) * 100;
+            const isFirst = i === 0;
+            const isLast = i === count - 1;
+            const offsetPercentage = isFirst ? 0 : isLast ? -100 : -50;
+            const style = getTickStyles(this.direction, tickPosition, offsetPercentage);
+            const tickValue = min + i * step;
+            const bounded = tickValue <= currValue;
+            return {
+                "data-disabled": getDataDisabled(this.disabled.current),
+                "data-orientation": getDataOrientation(this.orientation.current),
+                "data-bounded": bounded ? "" : undefined,
+                "data-value": tickValue,
+                style,
+                [SLIDER_TICK_ATTR]: "",
+            };
+        });
+    });
+    ticksRenderArr = $derived.by(() => {
+        return this.ticksPropsArr.map((_, i) => i);
+    });
+    snippetProps = $derived.by(() => ({
+        ticks: this.ticksRenderArr,
+        thumbs: this.thumbsRenderArr,
+    }));
+}
+class SliderMultiRootState extends SliderBaseRootState {
+    value;
+    isMulti = true;
+    activeThumb = $state(null);
+    currentThumbIdx = $state(0);
+    onValueCommit;
+    constructor(props) {
+        super(props);
+        this.value = props.value;
+        this.onValueCommit = props.onValueCommit;
+        onMountEffect(() => {
+            return executeCallbacks(on(document, "pointerdown", this.handlePointerDown), on(document, "pointerup", this.handlePointerUp), on(document, "pointermove", this.handlePointerMove), on(document, "pointerleave", this.handlePointerUp));
+        });
+        watch([
+            () => this.step.current,
+            () => this.min.current,
+            () => this.max.current,
+            () => this.value.current,
+        ], ([step, min, max, value]) => {
             const isValidValue = (v) => {
                 const snappedValue = snapValueToStep(v, min, max, step);
                 return snappedValue === v;
@@ -77,7 +285,7 @@ class SliderRootState {
             }
         });
     }
-    applyPosition = ({ clientXY, activeThumbIdx, start, end, }) => {
+    applyPosition({ clientXY, activeThumbIdx, start, end, }) {
         const min = this.min.current;
         const max = this.max.current;
         const percent = (clientXY - start) / (end - start);
@@ -100,8 +308,8 @@ class SliderRootState {
                 this.updateValue(newValue, activeThumbIdx);
             }
         }
-    };
-    getClosestThumb = (e) => {
+    }
+    #getClosestThumb = (e) => {
         const thumbs = this.getAllThumbs();
         if (!thumbs.length)
             return;
@@ -126,7 +334,7 @@ class SliderRootState {
         };
     };
     handlePointerMove = (e) => {
-        if (!this.isActive)
+        if (!this.isActive || this.disabled.current)
             return;
         e.preventDefault();
         e.stopPropagation();
@@ -171,10 +379,10 @@ class SliderRootState {
         }
     };
     handlePointerDown = (e) => {
-        if (e.button !== 0)
+        if (e.button !== 0 || this.disabled.current)
             return;
         const sliderNode = this.ref.current;
-        const closestThumb = this.getClosestThumb(e);
+        const closestThumb = this.#getClosestThumb(e);
         if (!closestThumb || !sliderNode)
             return;
         const target = e.target;
@@ -187,8 +395,10 @@ class SliderRootState {
         this.handlePointerMove(e);
     };
     handlePointerUp = () => {
+        if (this.disabled.current)
+            return;
         if (this.isActive) {
-            this.onValueChangeEnd.current(untrack(() => this.value.current));
+            this.onValueCommit.current(untrack(() => this.value.current));
         }
         this.isActive = false;
     };
@@ -275,7 +485,6 @@ class SliderRootState {
         const step = this.step.current;
         const difference = max - min;
         let count = Math.ceil(difference / step);
-        // eslint-disable-next-line eqeqeq
         if (difference % step == 0) {
             count++;
         }
@@ -307,24 +516,6 @@ class SliderRootState {
         ticks: this.ticksRenderArr,
         thumbs: this.thumbsRenderArr,
     }));
-    props = $derived.by(() => ({
-        id: this.id.current,
-        "data-orientation": getDataOrientation(this.orientation.current),
-        "data-disabled": getDataDisabled(this.disabled.current),
-        style: {
-            touchAction: this.orientation.current === "horizontal" ? "pan-y" : "pan-x",
-        },
-        [SLIDER_ROOT_ATTR]: "",
-    }));
-    createThumb = (props) => {
-        return new SliderThumbState(props, this);
-    };
-    createRange = (props) => {
-        return new SliderRangeState(props, this);
-    };
-    createTick = (props) => {
-        return new SliderTickState(props, this);
-    };
 }
 const VALID_SLIDER_KEYS = [
     kbd.ARROW_LEFT,
@@ -348,9 +539,14 @@ class SliderRangeState {
         });
     }
     rangeStyles = $derived.by(() => {
-        const value = this.#root.value.current;
-        const min = value.length > 1 ? this.#root.getPositionFromValue(Math.min(...value) ?? 0) : 0;
-        const max = 100 - this.#root.getPositionFromValue(Math.max(...value) ?? 0);
+        const min = Array.isArray(this.#root.value.current)
+            ? this.#root.value.current.length > 1
+                ? this.#root.getPositionFromValue(Math.min(...this.#root.value.current) ?? 0)
+                : 0
+            : 0;
+        const max = Array.isArray(this.#root.value.current)
+            ? 100 - this.#root.getPositionFromValue(Math.max(...this.#root.value.current) ?? 0)
+            : 100 - this.#root.getPositionFromValue(this.#root.value.current);
         return {
             position: "absolute",
             ...getRangeStyles(this.#root.direction, min, max),
@@ -379,34 +575,17 @@ class SliderThumbState {
             id: this.#id,
             ref: this.#ref,
         });
+        this.onkeydown = this.onkeydown.bind(this);
     }
-    updateValue = (newValue) => {
-        this.#root.updateValue(newValue, this.#index.current);
-    };
-    moveValue = (thumbValue, increment) => {
-        const newValue = thumbValue + increment;
-        if (newValue >= this.#root.min.current && newValue <= this.#root.max.current) {
-            this.updateValue(newValue);
-        }
-    };
-    handleArrowKey = (thumbValue, isPositiveDirection, isHorizontal, e) => {
-        const orientation = this.#root.orientation.current;
-        const direction = this.#root.direction;
-        if ((isHorizontal && orientation !== "horizontal") ||
-            (!isHorizontal && orientation === "horizontal"))
-            return;
-        const isForwardDirection = (isHorizontal && direction === "lr") || (!isHorizontal && direction === "bt");
-        if (e.metaKey) {
-            const max = this.#root.max.current;
-            const min = this.#root.min.current;
-            this.updateValue(isForwardDirection === isPositiveDirection ? max : min);
+    #updateValue(newValue) {
+        if (this.#root.isMulti) {
+            this.#root.updateValue(newValue, this.#index.current);
         }
         else {
-            const step = this.#root.step.current;
-            this.moveValue(thumbValue, isForwardDirection === isPositiveDirection ? step : -step);
+            this.#root.updateValue(newValue);
         }
-    };
-    #onkeydown = (e) => {
+    }
+    onkeydown(e) {
         if (this.#isDisabled)
             return;
         const currNode = this.#ref.current;
@@ -416,36 +595,38 @@ class SliderThumbState {
         if (!thumbs.length)
             return;
         const idx = thumbs.indexOf(currNode);
-        this.#root.currentThumbIdx = idx;
+        if (this.#root.isMulti) {
+            this.#root.currentThumbIdx = idx;
+        }
         if (!VALID_SLIDER_KEYS.includes(e.key))
             return;
         e.preventDefault();
         const min = this.#root.min.current;
         const max = this.#root.max.current;
         const value = this.#root.value.current;
-        const thumbValue = value[idx];
+        const thumbValue = Array.isArray(value) ? value[idx] : value;
         const orientation = this.#root.orientation.current;
         const direction = this.#root.direction;
         const step = this.#root.step.current;
         switch (e.key) {
             case kbd.HOME:
-                this.updateValue(min);
+                this.#updateValue(min);
                 break;
             case kbd.END:
-                this.updateValue(max);
+                this.#updateValue(max);
                 break;
             case kbd.ARROW_LEFT:
                 if (orientation !== "horizontal")
                     break;
                 if (e.metaKey) {
                     const newValue = direction === "rl" ? max : min;
-                    this.updateValue(newValue);
+                    this.#updateValue(newValue);
                 }
                 else if (direction === "rl" && thumbValue < max) {
-                    this.updateValue(thumbValue + step);
+                    this.#updateValue(thumbValue + step);
                 }
                 else if (direction === "lr" && thumbValue > min) {
-                    this.updateValue(thumbValue - step);
+                    this.#updateValue(thumbValue - step);
                 }
                 break;
             case kbd.ARROW_RIGHT:
@@ -453,46 +634,47 @@ class SliderThumbState {
                     break;
                 if (e.metaKey) {
                     const newValue = direction === "rl" ? min : max;
-                    this.updateValue(newValue);
+                    this.#updateValue(newValue);
                 }
                 else if (direction === "rl" && thumbValue > min) {
-                    this.updateValue(thumbValue - step);
+                    this.#updateValue(thumbValue - step);
                 }
                 else if (direction === "lr" && thumbValue < max) {
-                    this.updateValue(thumbValue + step);
+                    this.#updateValue(thumbValue + step);
                 }
                 break;
             case kbd.ARROW_UP:
                 if (e.metaKey) {
                     const newValue = direction === "tb" ? min : max;
-                    this.updateValue(newValue);
+                    this.#updateValue(newValue);
                 }
                 else if (direction === "tb" && thumbValue > min) {
-                    this.updateValue(thumbValue - step);
+                    this.#updateValue(thumbValue - step);
                 }
                 else if (direction !== "tb" && thumbValue < max) {
-                    this.updateValue(thumbValue + step);
+                    this.#updateValue(thumbValue + step);
                 }
                 break;
             case kbd.ARROW_DOWN:
                 if (e.metaKey) {
                     const newValue = direction === "tb" ? max : min;
-                    this.updateValue(newValue);
+                    this.#updateValue(newValue);
                 }
                 else if (direction === "tb" && thumbValue < max) {
-                    this.updateValue(thumbValue + step);
+                    this.#updateValue(thumbValue + step);
                 }
                 else if (direction !== "tb" && thumbValue > min) {
-                    this.updateValue(thumbValue - step);
+                    this.#updateValue(thumbValue - step);
                 }
                 break;
         }
-        this.#root.onValueChangeEnd.current(this.#root.value.current);
-    };
+        // @ts-expect-error - this is fine
+        this.#root.onValueCommit.current(this.#root.value.current);
+    }
     props = $derived.by(() => ({
         ...this.#root.thumbsPropsArr[this.#index.current],
         id: this.#id.current,
-        onkeydown: this.#onkeydown,
+        onkeydown: this.onkeydown,
     }));
 }
 class SliderTickState {
@@ -515,16 +697,20 @@ class SliderTickState {
         id: this.#id.current,
     }));
 }
-const [setSliderRootContext, getSliderRootContext] = createContext("Slider.Root");
+const SliderRootContext = new Context("Slider.Root");
 export function useSliderRoot(props) {
-    return setSliderRootContext(new SliderRootState(props));
+    const { type, ...rest } = props;
+    const rootState = type === "single"
+        ? new SliderSingleRootState(rest)
+        : new SliderMultiRootState(rest);
+    return SliderRootContext.set(rootState);
 }
 export function useSliderRange(props) {
-    return getSliderRootContext().createRange(props);
+    return new SliderRangeState(props, SliderRootContext.get());
 }
 export function useSliderThumb(props) {
-    return getSliderRootContext().createThumb(props);
+    return new SliderThumbState(props, SliderRootContext.get());
 }
 export function useSliderTick(props) {
-    return getSliderRootContext().createTick(props);
+    return new SliderTickState(props, SliderRootContext.get());
 }

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

@@ -1,25 +1,11 @@
 import type { OnChangeFn, WithChild, Without } from "../../internal/types.js";
-import type { PrimitiveSpanAttributes } from "../../shared/attributes.js";
+import type { BitsPrimitiveSpanAttributes } from "../../shared/attributes.js";
 import type { Direction, Orientation } from "../../shared/index.js";
 export type SliderRootSnippetProps = {
     ticks: number[];
     thumbs: number[];
 };
-export type SliderRootPropsWithoutHTML = WithChild<{
-    /**
-     * The value of the slider.
-     * @bindable
-     */
-    value?: number[];
-    /**
-     * A callback function called when the value changes.
-     */
-    onValueChange?: OnChangeFn<number[]>;
-    /**
-     * A callback function called when the user stops dragging the thumb,
-     * which is useful for knowing when the user has finished interacting with the slider.
-     */
-    onValueChangeEnd?: OnChangeFn<number[]>;
+export type BaseSliderRootPropsWithoutHTML = {
     /**
      * Whether to automatically sort the values in the array when moving thumbs past
      * one another.
@@ -42,7 +28,7 @@ export type SliderRootPropsWithoutHTML = WithChild<{
     /**
      * The amount to increment the value by when the user presses the arrow keys.
      *
-     * @defayltValue 1
+     * @defaultValue 1
      */
     step?: number;
     /**
@@ -67,19 +53,59 @@ export type SliderRootPropsWithoutHTML = WithChild<{
      * @defaultValue false
      */
     disabled?: boolean;
+};
+export type SliderSingleRootPropsWithoutHTML = BaseSliderRootPropsWithoutHTML & {
     /**
-     * Whether or not the value state is controlled or not. If `true`, the component will
-     * not update the value state internally, instead it will call `onValueChange` when it
-     * would have otherwise, and it is up to you to update the `value` prop that is passed
-     * to the component.
+     * The type of slider. If set to `'multiple'`, the slider will
+     * allow multiple ticks and the `value` will be an array of numbers.
      *
-     * @defaultValue false
+     * @required
+     */
+    type: "single";
+    /**
+     * The value of the slider.
+     * @bindable
+     */
+    value?: number;
+    /**
+     * A callback function called when the value changes.
+     */
+    onValueChange?: OnChangeFn<number>;
+    /**
+     * A callback function called when the user stops dragging the
+     * thumb and the value is committed.
+     */
+    onValueCommit?: OnChangeFn<number>;
+};
+export type SliderMultiRootPropsWithoutHTML = BaseSliderRootPropsWithoutHTML & {
+    /**
+     * The type of slider. If set to `'multiple'`, the slider will
+     * allow multiple ticks and the `value` will be an array of numbers.
+     *
+     * @required
      */
-    controlledValue?: boolean;
-}, SliderRootSnippetProps>;
-export type SliderRootProps = SliderRootPropsWithoutHTML & Without<PrimitiveSpanAttributes, SliderRootPropsWithoutHTML>;
+    type: "multiple";
+    /**
+     * The value of the slider.
+     * @bindable
+     */
+    value?: number[];
+    /**
+     * A callback function called when the value changes.
+     */
+    onValueChange?: OnChangeFn<number[]>;
+    /**
+     * A callback function called when the user stops dragging the
+     * thumb and the value is committed.
+     */
+    onValueCommit?: OnChangeFn<number[]>;
+};
+export type SliderRootPropsWithoutHTML = WithChild<SliderSingleRootPropsWithoutHTML, SliderRootSnippetProps> | WithChild<SliderMultiRootPropsWithoutHTML, SliderRootSnippetProps>;
+export type SliderSingleRootProps = SliderSingleRootPropsWithoutHTML & Without<BitsPrimitiveSpanAttributes, WithChild<SliderSingleRootPropsWithoutHTML, SliderRootSnippetProps>>;
+export type SliderMultipleRootProps = SliderMultiRootPropsWithoutHTML & Without<BitsPrimitiveSpanAttributes, WithChild<SliderMultiRootPropsWithoutHTML, SliderRootSnippetProps>>;
+export type SliderRootProps = SliderRootPropsWithoutHTML & Without<BitsPrimitiveSpanAttributes, SliderRootPropsWithoutHTML>;
 export type SliderRangePropsWithoutHTML = WithChild;
-export type SliderRangeProps = SliderRangePropsWithoutHTML & Without<PrimitiveSpanAttributes, SliderRangePropsWithoutHTML>;
+export type SliderRangeProps = SliderRangePropsWithoutHTML & Without<BitsPrimitiveSpanAttributes, SliderRangePropsWithoutHTML>;
 export type SliderThumbPropsWithoutHTML = WithChild<{
     /**
      * Whether the thumb is disabled or not.
@@ -93,7 +119,7 @@ export type SliderThumbPropsWithoutHTML = WithChild<{
      */
     index: number;
 }>;
-export type SliderThumbProps = SliderThumbPropsWithoutHTML & Without<PrimitiveSpanAttributes, SliderThumbPropsWithoutHTML>;
+export type SliderThumbProps = SliderThumbPropsWithoutHTML & Without<BitsPrimitiveSpanAttributes, SliderThumbPropsWithoutHTML>;
 export type SliderTickPropsWithoutHTML = WithChild<{
     /**
      * The index of the tick in the array of ticks provided by the `children` snippet prop of the
@@ -101,4 +127,4 @@ export type SliderTickPropsWithoutHTML = WithChild<{
      */
     index: number;
 }>;
-export type SliderTickProps = SliderTickPropsWithoutHTML & Without<PrimitiveSpanAttributes, SliderTickPropsWithoutHTML>;
+export type SliderTickProps = SliderTickPropsWithoutHTML & Without<BitsPrimitiveSpanAttributes, SliderTickPropsWithoutHTML>;