Create a rotatable radio button

Hi, I’d like to have a rotatable knob like a volume knob but could not find a solution to this. Any help is welcome.

not builtin.
create custom or for example rely on tweenMax

This uses a nice little library called JogDial, you can tell my creativeness by the dial style! But, I have created it so you can see how it works :smile: (94.2 KB)


Great. Thank you very much for your suggestions.

Thank you so much, I’ve been trying to use the library and it works very well.
My only need and a bit of a problem is attaching a png image as the dial. I can’t seem to control the styling. Any help would be greatly appreciated.

In the head html:
#dial_knob {

background-image: url(“”);

background-color: black !important; /* the jogdail.js is set in debug mode which makes the wheel have a green overlay
You should be able to turn the debug off but in hype this breaks the JS. so we simply change it here*/


Hi Blake!

I’ve replied to your post here…

So helpful thank you so much

1 Like (863.5 KB)

So, I ended up using css code to under the dial. But, now I can’t get the angle to start
at -120deges, basically trying to match the track, where the start is to the far left.

Hi Blake!

My mind will soon be in the Magic Kingdom :zzz::zzz:

I will look at this later today, or maybe someone else - such as @MarkHunte - will have an insight or two to offer.

I have done this on a site but would need to look at the code I used as although it should be simple it was not with the mix of Hype and Jogdail

Cannot of hand remeber what I did but will look when I get back

Ok I manage to look at it. My main trick was just for the intro and volume slider animation.
I wanted the knob to slowly rotate. I had to dummy it doing so.

But min starts on the side of 0+ degs not - 0 degs

I think there is a math issue in the JogDial.js that does not deal with (-) signed integers.
Using them seems to go in reverse with a jump… more digging needed

Thanks so much, so close on this one, I’m testing the integer trick. So close.
Yes, I at the same behavior as you. Where the dial jumps to the end of rotation when initiated. (777.1 KB)
hope it’ll work :slight_smile:


Wow, thanks millions. I have some work to do here.

Brilliant stuff - Extension maybe with options?

1 Like

Beautiful! Honking%20Horn%20right