Slider controlling and controlled by an 3D object

Hello,

I have a project where I want my sliders to move the 3D object, but I also want to be able to click on the 3D object and carry them with the mouse. This should also change the position of the corresponding slider. Each object has only one Degree of Freedom.
For example, for the object of this example, I want to make it move only on the x-direction of the 3D.

I could make move the 3d object with the slider, but I can’t find a way to make move the slider correctly.

The code is structured as follow:
Simulation send SilderRef ( a useRef const) to the function PrototypeRobot and to another function ( GrControlPanel ) that then calls SliderComponent.


export default function Simulation() {
  const handle = useFullScreenHandle();
  const SilderRef= useRef();

  return (
       <div>
        <Canvas>
          <Suspense fallback={null}>
            <OrbitControls enableRotate={true} />
            <PrototypeRobot SilderRef={SilderRef} />
          </Suspense>
        </Canvas>
        <GrControlPanel SilderRef={SilderRef} />
      </div>

  );
}



function SliderComponent(props) {

const [value, setValue] = React.useState(5);

  useEffect(() => (props.SilderRef.current.position.x = value));

  return (
        <RangeInput
          value={value}
          min={props.min}
          max={props.max}
          step={props.step}
          onChange={(event) => setValue(event.target.value)}
  );
}




export default function PrototypeRobot(props) {
  const [valueSlider1, setValueSilder1] = React.useState();
  
return(<group
          ref={props.SilderRef}
          position={[-0.03, 0.05, 0.55]}
          rotation={[0, -Math.PI / 2, 0]}
/*     I don't know how to handle the following part and return the information to the slider */  
        onPointerDown={(e) => setValueSilder1()}
        >);
}