Make Range slider draggable

[zibrahimov]

Hi! How can I make slider draggable like below? I tried to create custom mode but no luck.

[zibrahimov]

Hi @sghall . Is there any plan to add this feature? Thanks

[agusterodin]

Did you ever find a solution? Getting refs and calculating things on your own is possible but yucky.

[zibrahimov]

@agusterodin No I didn't. I used rc-slider.

[agusterodin]

Ha that is funny, we just switched off of rc-slider. I love that this library is headless and works really well with utility-first css.

[zibrahimov]

@agusterodin Lol yeah actually I don't like rc-slider. It has a lot of bugs. But unfortunately for drag functionality I had to switch because I don't have time to write it myself for this one.

[agusterodin]

You can achieve it using the react-use-gesture library. Works perfectly:

  const trackDragHandler = useDrag(({ initial: [initialX], xy: [currentX], memo }) => {
    const initialRange = memo || playbackRange
    if (!playbackStarted && containerRef.current && initialRange) {
      const { left: sliderLeft, width: sliderWidth } = containerRef.current.getBoundingClientRect()
      const initialClickOffsetLeft = initialX - sliderLeft
      const currentMousePositionOffsetLeft = currentX - sliderLeft
      const initialPercentageWithinContainer = initialClickOffsetLeft / sliderWidth
      const currentPercentageWithinContainer = currentMousePositionOffsetLeft / sliderWidth
      const initialStep = TIMELINE_SELECTION_RANGE * initialPercentageWithinContainer
      const currentStep = TIMELINE_SELECTION_RANGE * currentPercentageWithinContainer
      const initialToCurrentStepDelta = currentStep - initialStep
      dispatch(setTimelinePlaybackRange([initialRange[0] + initialToCurrentStepDelta, initialRange[1] + initialToCurrentStepDelta]))
    }
    return initialRange
  })

[alexfernandez803]

Had anyone has an draggable implementation?