@marcoschwartz/lite-ui 0.18.0 → 0.18.1

package/dist/index.mjs

@@ -2944,15 +2944,22 @@ var Slider = ({
     setInternalValue(newValue);
     onChange?.(newValue);
   };
-  const handleRangeMouseDown = (e, handle) => {
+  const handleRangeStart = (clientX, handle) => {
     if (disabled) return;
-    e.preventDefault();
     setIsDragging(handle);
   };
-  const handleRangeMouseMove = (e) => {
+  const handleRangeMouseDown = (e, handle) => {
+    e.preventDefault();
+    handleRangeStart(e.clientX, handle);
+  };
+  const handleRangeTouchStart = (e, handle) => {
+    e.preventDefault();
+    handleRangeStart(e.touches[0].clientX, handle);
+  };
+  const updateRangeValue = (clientX) => {
     if (!isDragging || !trackRef.current || disabled) return;
     const rect = trackRef.current.getBoundingClientRect();
-    const percentage2 = Math.max(0, Math.min(100, (e.clientX - rect.left) / rect.width * 100));
+    const percentage2 = Math.max(0, Math.min(100, (clientX - rect.left) / rect.width * 100));
     const newValue = Math.round(percentage2 / 100 * (max - min) / step) * step + min;
     if (isDragging === "min") {
       const newMin = Math.min(newValue, rangeValue[1] - step);
@@ -2966,16 +2973,28 @@ var Slider = ({
       onRangeChange?.(newRange);
     }
   };
-  const handleRangeMouseUp = () => {
+  const handleRangeMouseMove = (e) => {
+    updateRangeValue(e.clientX);
+  };
+  const handleRangeTouchMove = (e) => {
+    if (e.touches.length > 0) {
+      updateRangeValue(e.touches[0].clientX);
+    }
+  };
+  const handleRangeEnd = () => {
     setIsDragging(null);
   };
   React18.useEffect(() => {
     if (isDragging) {
       document.addEventListener("mousemove", handleRangeMouseMove);
-      document.addEventListener("mouseup", handleRangeMouseUp);
+      document.addEventListener("mouseup", handleRangeEnd);
+      document.addEventListener("touchmove", handleRangeTouchMove);
+      document.addEventListener("touchend", handleRangeEnd);
       return () => {
         document.removeEventListener("mousemove", handleRangeMouseMove);
-        document.removeEventListener("mouseup", handleRangeMouseUp);
+        document.removeEventListener("mouseup", handleRangeEnd);
+        document.removeEventListener("touchmove", handleRangeTouchMove);
+        document.removeEventListener("touchend", handleRangeEnd);
       };
     }
   }, [isDragging, rangeValue]);
@@ -3012,6 +3031,7 @@ var Slider = ({
             `,
             style: { left: `${minPercentage}%` },
             onMouseDown: (e) => handleRangeMouseDown(e, "min"),
+            onTouchStart: (e) => handleRangeTouchStart(e, "min"),
             role: "slider",
             "aria-label": `${label ? label + " " : ""}minimum value`,
             "aria-valuemin": min,
@@ -3028,6 +3048,7 @@ var Slider = ({
             `,
             style: { left: `${maxPercentage}%` },
             onMouseDown: (e) => handleRangeMouseDown(e, "max"),
+            onTouchStart: (e) => handleRangeTouchStart(e, "max"),
             role: "slider",
             "aria-label": `${label ? label + " " : ""}maximum value`,
             "aria-valuemin": rangeValue[0],