diff --git a/packages/react/slider/src/Slider.tsx b/packages/react/slider/src/Slider.tsx index 69bab3511..af964b3ee 100644 --- a/packages/react/slider/src/Slider.tsx +++ b/packages/react/slider/src/Slider.tsx @@ -262,6 +262,14 @@ const SliderHorizontal = React.forwardRef 0 + ? event.changedTouches[0].clientX + : event.clientX; + return getValueFromPointer(pointerPosition); + } + return ( { - const value = getValueFromPointer(event.clientX); + const value = getValueFromEvent(event); onSlideStart?.(value); }} onSlideMove={(event) => { - const value = getValueFromPointer(event.clientX); + const value = getValueFromEvent(event); onSlideMove?.(value); }} onSlideEnd={() => { @@ -336,6 +344,14 @@ const SliderVertical = React.forwardRef 0 + ? event.changedTouches[0].clientY + : event.clientY; + return getValueFromPointer(pointerPosition); + } + return ( { - const value = getValueFromPointer(event.clientY); + const value = getValueFromEvent(event); onSlideStart?.(value); }} onSlideMove={(event) => { - const value = getValueFromPointer(event.clientY); + const value = getValueFromEvent(event); onSlideMove?.(value); }} onSlideEnd={() => { @@ -382,9 +398,9 @@ const SliderVertical = React.forwardRef; type PrimitiveDivProps = Radix.ComponentPropsWithoutRef; type SliderImplPrivateProps = { - onSlideStart(event: React.PointerEvent): void; - onSlideMove(event: React.PointerEvent): void; - onSlideEnd(event: React.PointerEvent): void; + onSlideStart(event: React.PointerEvent | React.TouchEvent): void; + onSlideMove(event: React.PointerEvent | React.TouchEvent): void; + onSlideEnd(event: React.PointerEvent | React.TouchEvent): void; onHomeKeyDown(event: React.KeyboardEvent): void; onEndKeyDown(event: React.KeyboardEvent): void; onStepKeyDown(event: React.KeyboardEvent): void; @@ -448,6 +464,17 @@ const SliderImpl = React.forwardRef( onSlideEnd(event); } })} + onTouchMove={composeEventHandlers(props.onTouchMove, (event) => { + event.preventDefault(); + onSlideMove(event); + })} + onTouchStart={composeEventHandlers(props.onTouchStart, (event) => { + event.preventDefault(); + onSlideStart(event); + })} + onTouchEnd={composeEventHandlers(props.onTouchEnd, (event) => { + onSlideEnd(event); + })} /> ); }