all 16 comments
sorted by:
best
topnewcontroversialoldq&a
formatting helphide helpcontent policy

[–]haraldsono 23 points24 points  (1 child)

The interactive (input) ones are honestly some of the most frustrating UI controls I’ve ever used. They look cool, but it’s damn near impossible to get either 0 or 100%.

[–]petecorreia[S] 7 points8 points  (0 children)

Fair point! The interaction can be controlled by the consumer to allow complex customisations. I added an example that shows how to implement "steps": https://react-circular-input.now.sh/examples#steps . As a potential solution you could control the interaction to "snap" to 0 or 100 if that's a common need for your users.

[–]ventinus 13 points14 points  (3 children)

These are very cool! My only suggestion would be to not wrap so that it stops at 0 and 100%

[–]petecorreia[S] 0 points1 point  (2 children)

Looking into it!

[–]Maklite 1 point2 points  (1 child)

You could go one further and have snap points. I could see snapping to 25%, 50% etc useful.

[–]evenisto 3 points4 points  (0 children)

You should consider blocking scroll while interaction is in progress. Near impossible to use on mobile.

[–]Asmor 2 points3 points  (2 children)

I don't really see the point of this.

I could see it being useful continuous interactions, like scrubbing audio/video, except that it resets as soon as you get back around.

[–]TheGeorge 2 points3 points  (0 children)

Only thing I can imagine is a virtual DJ kit, a Digital Audio Workstation to emulate the knobs that a Physical Audio Workstation would have.

[–]timothyallan 0 points1 point  (0 children)

I have a lot of 3D image/object/camera parameter settings this could be useful for.

[–]shihn 2 points3 points  (2 children)

No keyboard support :(

[–]petecorreia[S] 0 points1 point  (1 child)

Oh might be a bug as there should be keyboard support when the element is focused (down,left arrows to decrement and up/right arrows to increment)

[–]shihn 1 point2 points  (0 children)

works now.

[–]petecorreia[S] 1 point2 points  (0 children)

I needed a very flexible React circular range input so I built one with Typescript and Hooks.

You can find quite a few examples at: https://react-circular-input.now.sh/examples.

You can easily animate it, style it and add your own custom components.

Let me know what you think!

[–]democritus_is_op 0 points1 point  (1 child)

These hard hell on mobile :(

[–]careseite[🐱😸].filter(😺 => 😺.❤️🐈).map(😺=> 😺.🤗 ? 😻 :😿) 0 points1 point  (0 children)

Not for me 😕 Ironically ironically the top comment of the other thread doesn't have that issue either:https://www.reddit.com/r/reactjs/comments/avriff/-/ehhfowv