How can I improve the fluidity of touch scrolling in my React slider component?

I’m currently developing a touch-enabled slider component in React, and I need help improving the fluidity of the scrolling experience when users swipe on their screens. Here is the relevant part of my code for the touchMove function:

const touchMove = (
  e,
  fluidity = 0.5, // Controls the responsiveness of the slider to touch movements.
  speed = 2, // Determines the scrolling speed based on the swipe distance.
  damping = 3, // Softens the scrolling effect.
  threshold = 1, // Minimum distance to trigger scrolling.
  maxSpeed = 20 // Maximum speed limit for scrolling.
) => {
  if (!isDragging) return;

  const sliderElement = sliderContainerDimension.elementRef.current;
  const currentX = e.touches[0].clientX;
  const distance = startX - currentX;

  // Check if the distance exceeds the threshold
  if (Math.abs(distance) < threshold) return;

  // Calculate the adjusted speed with damping
  const adjustedSpeed =
    Math.min(Math.abs(distance * speed), maxSpeed) * damping;

  // Determine the scroll direction
  const adjustedValue = distance > 0 ? adjustedSpeed : -adjustedSpeed;

  sliderElement.scrollLeft += adjustedValue * fluidity;
};

My Challenges:

1. Fluidity: The current implementation feels a bit jerky, and I would like to make the scrolling feel smoother.
2. Responsiveness: I want the slider to respond more intuitively to the user’s touch input.

Questions:

• What strategies can I use to enhance the fluidity of the touch scrolling?
• Are there best practices for handling touch events in a way that improves user experience?
• Should I consider using a library or tool to help with this aspect of the implementation?

Additional Information:

• The slider component is part of a larger project where I am using React and custom hooks.
• I’m also interested in any insights on managing the state and performance related to touch events.

Thank you in advance for your help!