Knob doesn't start at the top

[thisismygatekeeper]

I was trying this set up

<CircularSlider
  label="Test"
  labelColor="white"
  progressSize={0}
  trackSize={16}
  knobSize={48}
  knobColor={"#3AFAEF"}
  knobPosition="top"
  data={[0, 1, 2]}
  dataIndex={0}
/>

But the initial position of the knob is like this

Is there any way we can make the knob starts at the exact top? Thank you!

[fseehawer]

That's because the three values (0, 1, 2) are evenly spread to 360 degrees and the knob is positioned in the middle of each section. Currently, there is no prop to position the knob at the beginning or at the end of each section.

[Janvampierssel]

There is a way to set it at the top!

With dataIndex={} you can adjust the value until it visually initiates at the start.

For my 10-step slider I need to set it to dataIndex={-0.49} for it to be (almost) exactly at the top.