Ring shaped UI Component

[gitchomik]

Ring shaped UI Component with same functions as sliders that allow the user to adjust a specific color channel.

• multiple rings types covering hue, saturation, value, red, green, blue, alpha
• multiple rings around the iro.ui.Wheel

Or maybe just extend component: iro.ui.Slider options sliderShape: 'ring'
I think that it will looks very nice, especially around the iro.ui.Wheel

Example:
https://www.canva.com/colors/color-wheel/

[jaames]

This is something I'd really like as well! Implementation-wise it'd be pretty difficult though, especially with current layout stuff and the lack of real conical gradient support in SVG

Maybe one day :)

[unstopp]

Hi James,

First of all congrats on the slider!
It would be very handy to have a ring layout as well. Nothing complicated, just something that has no fade to white, if you know what I mean.

Here is an example: https://raw.githubusercontent.com/radial-color-picker/vue-color-picker/HEAD/screenshots/thumbnail.png

Really looking forward to your thoughts, thank you!

Marius

[jaames]

Hey Marius, thanks for reaching out!

Yeah, I'd really like to implement a ring component. The one thing blocking it is figuring out how to punch a hole in a HTML element, so that whatever is behind the ring will be visible through the middle properly. I was playing with CSS masks for this, and think it should be possible using those somehow, but couldn't quite get there.

Any ideas would be appreciated :)

[unstopp]

Hey James, thank you for your reply.
Do you think this code can help?

https://codepen.io/mariuselz/pen/gOWVQrO

[jaames]

Yeah, I've looked at using borders. You can use border-image to set a gradient, but unfortunately border-image doesn't work with border-radius, which is needed to make the ring a circle.

[unstopp]

Ah I see..

[jaames]

Finally got something up my sleeve for this, supports nesting and start/end angles ;)

[not-matt]

Hi James, I'd like to help you implement this interface. Would you be able to share with me your work so far?