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>

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!

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!

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.