Slider Support for an InputRef to give more control to consumer aroun…

…d the hidden input
radix-ui · Jul 23, 2024 · 03b8702 · 03b8702
1 parent 8175208
commit 03b8702
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 4 deletions.
diff --git a/packages/react/slider/src/Slider.stories.tsx b/packages/react/slider/src/Slider.stories.tsx
@@ -3,6 +3,7 @@ import { DirectionProvider } from '@radix-ui/react-direction';
 import { css } from '../../../../stitches.config';
 import serialize from 'form-serialize';
 import * as Slider from '@radix-ui/react-slider';
+import { Primitive } from '@radix-ui/react-primitive';
 
 export default { title: 'Components/Slider' };
 
@@ -264,12 +265,16 @@ export const SmallSteps = () => {
 export const WithinForm = () => {
   const [data, setData] = React.useState({
     single: [0],
+    input: [0],
     multiple: [10, 15, 20, 80],
     price: {
       min: 30,
       max: 70,
     },
   });
+
+  const inputRef = React.useRef<React.ElementRef<typeof Primitive.input>>(null);
+
   return (
     <form
       onSubmit={(event) => {
@@ -278,6 +283,9 @@ export const WithinForm = () => {
       }}
       onChange={(event) => {
         const formData = serialize(event.currentTarget, { hash: true });
+        if (event.target !== inputRef.current) {
+          console.log("This is the event from our input reference");
+        }
         setData(formData as any);
       }}
     >
@@ -294,6 +302,19 @@ export const WithinForm = () => {
       <br />
       <br />
 
+      <fieldset>
+        <legend>Input Ref value: {String(inputRef.current?.value)}</legend>
+        <Slider.Root name="input" defaultValue={data.single} className={rootClass()}>
+          <Slider.Track className={trackClass()}>
+            <Slider.Range className={rangeClass()} />
+          </Slider.Track>
+          <Slider.Thumb className={thumbClass()} inputRef={inputRef} />
+        </Slider.Root>
+      </fieldset>
+
+      <br />
+      <br />
+
       <fieldset>
         <legend>Multiple value: {String(data.multiple)}</legend>
         <Slider.Root name="multiple" defaultValue={data.multiple} className={rootClass()}>

diff --git a/packages/react/slider/src/Slider.tsx b/packages/react/slider/src/Slider.tsx
@@ -545,12 +545,13 @@ const SliderThumb = React.forwardRef<SliderThumbElement, SliderThumbProps>(
 type SliderThumbImplElement = React.ElementRef<typeof Primitive.span>;
 interface SliderThumbImplProps extends PrimitiveSpanProps {
   index: number;
+  inputRef?: React.RefObject<BubbleInputElement> | undefined;
   name?: string;
 }
 
 const SliderThumbImpl = React.forwardRef<SliderThumbImplElement, SliderThumbImplProps>(
   (props: ScopedProps<SliderThumbImplProps>, forwardedRef) => {
-    const { __scopeSlider, index, name, ...thumbProps } = props;
+    const { __scopeSlider, index, inputRef, name, ...thumbProps } = props;
     const context = useSliderContext(THUMB_NAME, __scopeSlider);
     const orientation = useSliderOrientationContext(THUMB_NAME, __scopeSlider);
     const [thumb, setThumb] = React.useState<HTMLSpanElement | null>(null);
@@ -618,6 +619,7 @@ const SliderThumbImpl = React.forwardRef<SliderThumbImplElement, SliderThumbImpl
               name ??
               (context.name ? context.name + (context.values.length > 1 ? '[]' : '') : undefined)
             }
+            inputRef={inputRef}
             value={value}
           />
         )}
@@ -630,10 +632,17 @@ SliderThumb.displayName = THUMB_NAME;
 
 /* -----------------------------------------------------------------------------------------------*/
 
-const BubbleInput = (props: React.ComponentPropsWithoutRef<'input'>) => {
-  const { value, ...inputProps } = props;
-  const ref = React.useRef<HTMLInputElement>(null);
+type BubbleInputElement = React.ElementRef<typeof Primitive.input>
+
+interface BubbleInputProps extends React.ComponentPropsWithoutRef<'input'> {
+  inputRef?: React.RefObject<BubbleInputElement> | undefined;
+}
+
+const BubbleInput = (props: BubbleInputProps) => {
+  const { value, inputRef, ...inputProps } = props;
   const prevValue = usePrevious(value);
+  let ref = React.useRef<BubbleInputElement>(null);
+  if (inputRef) ref = inputRef;  
 
   // Bubble value change to parents (e.g form change event)
   React.useEffect(() => {