New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Slider doesn't accurately react to touch. #17

nuttylord opened this Issue Aug 14, 2017 · 4 comments


None yet
2 participants

nuttylord commented Aug 14, 2017

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.

screen shot 2017-08-14 at 09 32 39
screen shot 2017-08-14 at 09 32 58
screen shot 2017-08-14 at 09 33 04
screen shot 2017-08-14 at 09 33 15
screen shot 2017-08-14 at 09 33 56


This comment has been minimized.

nuttylord commented Aug 15, 2017

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.


This comment has been minimized.

quangtruong16994 commented Aug 18, 2017

do you have any solutions?


This comment has been minimized.

nuttylord commented Aug 18, 2017

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 = () => {

  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 }); 

This comment has been minimized.

quangtruong16994 commented Aug 18, 2017

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 😁

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment