mzusin / react-round-slider

An accessible and mobile-friendly React Round Slider library, powered by TypeScript and SVG.

From Idea to Code: Playground & Experiments

Hi there! I'm a full-stack web developer who loves coding, programming, and working on open source projects. I have a passion for developing code projects, tools and libraries that are both functional and challenging. As a tech enthusiast, I'm always eager to learn and stay up-to-date with the latest technologies and trends. If you share my passion for coding and web development, I'd love to connect with you and exchange ideas.

---

react-round-slider's Issues

is:issue is:open Want to Place the Starting Point at the Top

Hello,

I'm really enjoying using this component—it's both useful and looks great.
However, I'd like to know how to place the starting point at the top.
Could you guide me on how to do that?

Thank you.

Cannot resize

I cannot resize the container or component itself. For example I want to give width of 150px and height of 150px etc.

<div className="fusion__newCircle">
                    <RoundSlider
                      min={0}
                      max={3}
                      step={0.1}
                      arrowStep={0.1}
                      round={1}
                      enableTicks={true}
                      ticksCount={30}
                      showTickValues={false}
                      ticksColor="#80BA26"
                      pathStartAngle={90}
                      pathEndAngle={360}
                      ticksWidth={3}
                      ticksHeight={13}
                      pathBgColor={"#e2e2e2"}
                      pointerBgColor={"#80BA26"}
                      pointerBgColorSelected={"#80BA26"}
                      animateOnClick={true}
                      animationDuration={500}
                      onChange={(value) => setController1value(value[0].value)}
                    />
</div>

Advanced Customization Options

Thank you for this lib, it's very polished and works well for our use case! I'm hoping to see if there may be ways to have advanced customization options for ticks, data, and text values.

For the data values list, would there be a way to use objects for that setting like { label: string, value: number | string }[]? We have a case where we need to have labels appear more than once, but they represent different values (our case being a clock showing 12 hour time labels, but the values use 24 hours).

So instead of this, which has duplicated entries and causes issues with how the values are treated when selecting the values:

data: ["12am", "2", "4", "6am", "8", "10", "12pm", "2", "4", "6pm", "8", "10"]

It'd be more like this:

data: [
  { value: 0, label: "12am" }, 
  { value: 2, label: "2" }, 
  { value: 4, label: "4" }, 
  { value: 6, label: "6am" }, 
  { value: 8, label: "8" }, 
  { value: 10, label: "10" }, 
  { value: 12, label: "12pm" }, 
  { value: 14, label: "2" }, 
  { value: 16, label: "4" }, 
  { value: 18, label: "6pm" }, 
  { value: 20, label: "8" }, 
  { value: 22, label: "10" }
 ]

Also, is there any way of dynamically deriving the tick colours based on the values? For example, if the tick is selected, show it highlighted with a different colour. Perhaps something like a selectedTickColor or maybe even a getTickColor(index, value) function for more dynamic use cases?

Similar question for the tick values to show it with a different colour if it's selected, or have a function to derive it based on some other use-case logic?

Lastly, is there a way to customize the center text values more? In my current use case, we want to show the total hours selected on the slider, so like 4 hours. Having something like a getText function would be perfect to customize that to show our calculated text based on the selected values.

I'd be happy to submit a PR if these changes seem like something you'd want to support in this lib!

Missing values

Circle does not take some values.

I realize that it does not take values multiplfy of 0.4 (0.4, 0.8, 1.2, 1.6 etc.)

When I remove

 pathStartAngle={90}
 pathEndAngle={360}

everything works good but I need a start angle of 90 and end of 360.

<RoundSlider
      min={0}
      max={3}
      step={0.1}
      arrowStep={0.1}
      round={1}
      enableTicks={true}
      ticksCount={30}
      ticksColor="#80BA26"
      pathStartAngle={90}
      pathEndAngle={360}
      pathRadius={125}
      hideText={true}
      showTickValues={false}
      ticksWidth={3}
      ticksHeight={13}
      pathBgColor={"#e2e2e2"}
      pointerBgColor={"#80BA26"}
      pointerBgColorSelected={"#80BA26"}
      animateOnClick={true}
      animationDuration={500}
      onChange={(value) => setController1value(value[0].value)}
/>

EDIT:

https://react-round-slider.mzsoft.org/pages/ticks-settings.html

In this example, it does not take some values too!