mnkhouri / react-circular-slider

A circular slider component for React

React Circular Slider

A full-featured circular slider React component, with full TypeScript definitions. See the docs and examples

Features:

• Simple to use
• No dependencies
• Customizable:
  • Start/stop angle
  • Min/max value
  • 0, 1, or 2 handles
• SVG based

Example

Install from npm: npm i react-circular-slider-svg

import CircularSlider from "react-circular-slider-svg";

export default () => {
  const [value1, setValue1] = useState(20);
  const [value2, setValue2] = useState(60);
  return (
    <CircularSlider
      size={200}
      trackWidth={4}
      minValue={0}
      maxValue={100}
      startAngle={40}
      endAngle={320}
      angleType={{
        direction: "cw",
        axis: "-y"
      }}
      handle1={{
        value: value1,
        onChange: v => setValue1(v)
      }}
      handle2={{
        value: value2,
        onChange: v => setValue2(v)
      }}
      arcColor="#690"
      arcBackgroundColor="#aaa"
    />
  );
};

react-circular-slider's Issues

The app does not support touch events

You cannot use handlers from your phone, you can only click on the needed area of a circle to set a new value

Block the slider at both ends

Thank you for your package, very useful.

Currently (although it's a circle and there's not really a "start" and "end") as a user, its obvious that the bottom is 0% and you turn clockwise to move your way to 100%.

We would very much like to be able to stop the circle from infinitely turning and making it difficult to pick 100%.

When turning clockwise it's easy to go from 100% to 0% and vice-versa when going from 0% counter-clockwise it's easy to go to 100%.

Is there currently a way to block the limits? We tried the min and max props without any luck!

Cheers

feature request: customise handle / handle color

please consider adding color customisation to the handle, and, another cool feature would be to also be able to use custom icons for the handle. thansks for the great tool.

feature request: add on mouse up function

I need to update my database when the slider has finished sliding. The onChange event given on the handle feeds to many changes... Can you add an onMouseUp event that fires once the user has finished using the slider? thanks!

Tooltips to handle

Is there a way to add a tooltip to the tooltip to the handle? Like so

feature request: Add CircularSliderWithChildren to documentation

You use this class multiple times in your docs but don't make any mention of it, would probably help. Cheers!

Rangeslider does not work on IOS

If you use IOS safari / chrome etc, your documentation page does not work (not possible to drag the thumbs). It is essential that this product is cross browser compatible and mobile friendly. https://marc.khouri.ca/react-circular-slider/

trackWidth as a prop

Can we have the trackWidth as a prop, i see that you use trackWidth as 4 now. Btw thankyou for this great tool !!

Customize color, stroke-dasharray and circles of the slider

Can i customize the slider to get the next result ?

onControlFinished not invoked after onTouchEnd

If I move the slider using my finger on a mobile device and then lift it, the component won't invoke onControlFinished .