themre/roundy

Simple react round slider. Supports touch events.

roundy's Issues

there is no disabled prop

I would like to be able to disable this control so that it cannot be changed.

clicking Thumb pushes to max

Clicking the thumb (without drag and without mouse release) will migrate the thumb and value to maximum position. This is counter to expected behaviour. value should only increase on drag / move of thumb. Click and unclick (no movement) should leave the thumb where it was first found (it should not "hop" somewhere else). This issue occurs with or without allowClick. Otherwise brilliant tool.

onChange receives NaN

at first click on thumb onChange callback receives NaN as a new value
(initial value is zero)

reset when reach 100% on a 360 slider

Hi, i'm new to the front-end and i'm using this to create a 360 slider.
I'm wondering if there's a way to reset the slider when reached the 100.
basically i want to create an infinite slider

Slider handle offset

Hi, I have found that the slider handle is offset

I am able to correct this by doing two things:

• Setting the width of the container to the same as the svg
• Setting the slider handle to be a container, with the indicator being positioned inside this container

I got it working by using...

.graph-circle-slider .sliderHandle {
  width: <size>px;
  height: <size>px;
  top: 0;
  left: 0;
  transform-origin: 50% 50%;
}

.graph-circle-slider .sliderHandle:after {
  content: '';
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 100%;
  position: absolute;
  top: calc(50% - 10px);
  right: 0;
  background: linear-gradient(to top,#fff,#f2f2f2);
  border: 1px solid #ccc;
  transform: all ease 0.4s;
  box-sizing: border-box;
}

You'll notice the handle is also now contained within the slider circle, you could change this by changing the offset to be negative and increasing the width, or by removing box-sizing

Let me know what you think

PS. Thanks for making this, its a life saver

drag on ios pulls page

Hi, when I have roundy on iOS, and the page is longer than the screen, dragging the thumb drags the page (not the thumb). Please enhance so that dragging the thumb has no affect on page. thanks!

Update: I was able to resolve my problem by doing a couple of things:
1: create a wrapping div around roundy, and add this css to the assigned class:

<div className="wrap-roundy"><Roundy {...} /></div>

.wrap-roundy {
  touch-action: none;
  -webkit-touch-action: none;
  -webkit-overflow-scrolling: touch;
}

2. I also modified the thumb and roundy itself like this (I am yet to determine what is redundant):

div.sc-AxjAm.eiuaRt.roundy {
  touch-action: none;
  -webkit-touch-action: none;
  -webkit-overflow-scrolling: touch;
}

.eiuaRt .sliderHandle {
  cursor: pointer;
  touch-action: none;
  -webkit-touch-action: none;
  -webkit-overflow-scrolling: touch;
}

.eiuaRt .sliderHandle::after {
  cursor: pointer;
  right: -10px;
  top: -5px;
  touch-action: none;
  -webkit-touch-action: none;
  -webkit-overflow-scrolling: touch;
}

Clickable Slider

It's not really an issue but a request for a feature.
Instead of requiring users to drag the knob, it's would be handy to detect click and set slider value at the position users click.
Thanks.

Edit: Currently, I am able to implement it using onClick on roundy's parent

  handleClick(event) {
    const { offsetY, offsetX } = event.nativeEvent;

    const distanceFromCenter = Math.sqrt((offsetY - RADIUS)**2 + (offsetX - RADIUS)**2);

    if (distanceFromCenter > RADIUS - WIDTH && distanceFromCenter < RADIUS) {
      const angle = Math.atan2(offsetY - (RADIUS - WIDTH)/2, offsetX - RADIUS);
      const newValue = Math.round(Math.abs(angle * 100 / Math.PI));
      // setState or do smth with newValue here
    }
  }

render() {
  <div onClick={this.handleClick}>
    <Roundy
      min={0}
      max={100}
      radius={RADIUS}
      strokeWidth={WIDTH}
     />
  </div>
}

Sliced prop not working properly on Firefox

@themre
On Firefox, when using sliced={true}, only one breakpoint is shown. Please, check the screenshot:

Pie round slider

Hey, hello everyone, first thank you for the library, is super useful.

I have the requirement of doing the slider like a pie slider, something like this:

I see this library does not offer a way to do it, but I am wondering if it would be easy to modify the slider on my fork to be able to do this, and if so, if you could point me in the right direction on how to do this.

Thanks in advance.

onAfterChange is triggered when clicking anywhere on the page

this can also be observed in the demo if you add a console.log in the onAfterChange function and can create problem as the call is not expected if the click is outside the slider.

styled components default.div is not a function

React Native Environment Info:
    System:
      OS: Linux 4.15 Ubuntu 18.04.2 LTS (Bionic Beaver)
      CPU: (8) x64 Intel(R) Core(TM) i7-6700HQ CPU @ 2.60GHz
      Memory: 420.51 MB / 11.63 GB
      Shell: 5.4.2 - /bin/zsh
    Binaries:
      Node: 8.10.0 - /usr/bin/node
      Yarn: 1.17.3 - /usr/bin/yarn
      npm: 3.5.2 - /usr/bin/npm
    npmPackages:
      react: 16.8.3 => 16.8.3 
      react-native: 0.59.8 => 0.59.8 
    npmGlobalPackages:
      react-native-cli: 2.0.1

import Roundy from 'roundy';

overrideStyle seems to be missing (is not working)

In index.js, the prop overrideStyle is not present on the Wrapper component. If I add the prop here, it still seems to work only partly works now (EDIT: I had two errors in my code, sorry):

• Setting a background works (after adding it inside index.js)
• Changing the sliderHandle does not work (issue with styled-components?)
• Changing the overall opacity does not work (same issue as above?)

overrideStyle={`
    svg path { opacity: 1; } /* correcting fixed value of 0.7 */
    .sliderHandle:after {   /* Just testing */
        background: pink;
    }
`}

EDIT: Sorry, due to typos ans previously introduced createGlobalStyle (for svg opacity), I was responsible for two of the first mentioned issues. Now, I could actually create a pull request that completely fixes this issue ;-)

Implement over-rotation

It would be good if when the user has rotated the full 360 degrees that we have the option to either:

• Stop rotating, so if the user wants 0, they have to rotate back
• Stack layers, so that we can go past "max" and continue rotating around and around, each time changing the colour of the rotation indicator, maybe if we used a gradient for the indicator it would work better.

Let me know your thoughts

Roundy touch event not working on IOS 13 (ipad)

Is there a way to let Roundy work evend on IOS 13 on Ipad?