Slider doesn't accurately react to touch.

[nuttylord]

I was messing around with the slider code and noticed that often when you are moving it around the circle it will not properly adjust itself to the exact position it should be in.

Images below show the error being reproduced in an android emulator and i have also tried compiling to native android and running again, still the same issue.

Basically what is happening is that at 12 o'clock the button correctly follows the mouse movements but as i move around the circle it does not perfectly follow the touch position onscreen. i feel this is a maths error since it starts correctly at the 12 position and ill be diving into trying to fix the issue myself after i do some other work but i thought id run it past here in case i can get a nice point to somewhere to start, anything is appreciated.

The red lines in the images are the mouse position. All the movements in the screenshots are counter clockwise bar the 12 0'clock position image so you can tell where the onTouchEnd position is.

[nuttylord]

I have figured out that the issue is caused by the sliders initial containerWidth being called asynchronously at the same time as the rendering of the SVG elements. the setState() on line 134 of circularSlider.js (inside the setCircleCenter() function) needs to complete before the component is mounted.

[quangtruong16994]

do you have any solutions?

[nuttylord]

i noticed that in the setCircleCenter() function the py value was what wasnt being updated properly but that px was set correctly so i made py to be a function of px as shown in my below snippet.

For my use case this works, maybe you can find something similar.

A suggestion would be to find some way to call this.setCircleCenter(); after all rendering is complete, maybe onResponderGrant, but this would be a state change and cause rendering.

  onLayout = () => {
    this.setCircleCenter();
  }

  setCircleCenter() {
    this._circle.measure((x, y, w, h, px , py) => {
      const halfOfContainer = this.getContainerWidth() / 2;

      this.setState({ circleCenterX: px + halfOfContainer, circleCenterY: px - (px/2.4) + halfOfContainer }); 
    });
  }

[quangtruong16994]

I found solution for my case too. I put circular slider in horizontal ScrollView, so px was wrong value, just px subtracts total previous items width, and it works fine 😁

[sa2812]

2 years too late, but thanks for the inspiration @nuttylord! The onLayout method on View is triggered when the key changes, so I updated changed the following element in CircularSlider.js to:

<View key={scrollY} style={...} onLayout={this.onLayout}>

I also added a PropType of number for scrollY, which I'm passing directly into the <CircularSlider scrollY={...} component where I'm calling it.

Finally, I'm using onScroll on the ScrollView to update the state with the current y-value, thus making sure that the centre of the circle is always updated correctly!

Using onScroll is a bit problematic if you want the exact scroll location as discussed on StackOverflow, but I'm happy with the results with onScroll