How does value work in knob?

[julian-kunzig]

When update the value In the knob, it doesn't bind to knob.
The value of knob seem to work like initial value in the component.
I input state to value of knob and it worked in initial loading but when update the state of component, it wasn't updated.

[julian-kunzig]

I checked the knob library and confirmed value works like initial value.

[julian-kunzig]

As temp solution I tried to redraw the knob component when value value was updated.
codesandbox
The value of knob is updated but the problem is Arc stopped to work correctly.
Any idea?

[lukedar]

@julian-kunzig did you find a way to make this a controlled component by updating it via value prop?

[vallsv]

Hi @lukedar, i did found this trick: you can inject a position to each sub components

    <Knob
        ...
    >
      <Pointer
        percentage={value / 360}
        ...
      <Value
        value={value}
      />

Could be better, but this way i was able to create nice result. Maybe even more complex than a single value stored in the knob prop.

[vallsv]

You must not use 360, but (value - min) / (max - min), which could be a bit annoying in your case.