Ring shaped UI Component · jaames/iro.js · Discussion #173

gitchomik
Aug 25, 2020

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/

Replies: 2 comments 6 replies

jaames
Aug 25, 2020
Maintainer

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 :)

5 replies

@unstopp

unstopp Aug 14, 2021

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

jaames Aug 19, 2021
Maintainer

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

unstopp Aug 20, 2021

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

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

@jaames

jaames Aug 20, 2021
Maintainer

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.