Circular slider procedure (without sprites)

A couple of months ago I made a circular slider procedure using a sprite for the thumb.
I think this version without sprites and with some improvements is a more elegant solution, simpler to use and to implement in your projects.

There’s already some extensions for adding circular sliders but using an only blocks solution, you can customize it any way you want and also learn more Kodular!

How it works and looks:

Seriously, it looks more complicated than it really is. Don’t hesitate to ask if you need to implement this in your project and can’t figure out something.

You have to create a square canvas (width = height). No matter the size, the slider will scale accordingly and remain functional as the video shows.

This is the function to use:


This is how you will set it for the same slider as in the video.


This is how to set the Canvas.Dragged event:

This is the main procedure which draws the slider:

And this is an auxiliary procedure to get the thumb position based on the x,y touched in the canvas.

Here’s the aia file shown in the video:
CircularSlider_NoSprites.aia (16.9 KB)


Nice, Very Advance Guide :+1:


great work…u always made great things . its owsm already implimented in my project due to your timingly help and really cool ideas :heart_eyes:


Great guide from the Master aka CanvasMaster :smiley:
(Perfect name given by someone… I don’t remember who :sweat_smile:)


Great @Italo :+1:


helpful guide :partying_face:

1 Like

:heart_eyes:You are a trigonometry master also :sweat_smile:

1 Like

I used the circular progress one I made for you and added the dragging to make it a slider.


Yeah i checked, it also looks owasm :heart::heart::blush:

1 Like

2+2 is 4. -1 that’s 3. quick maths. thank you, it helped.

1 Like

Not sure I understand the comment, but thanks! :grin:

Nice guide :heartbeat:

1 Like

I just, um… show off my maths skill :grin:


Hahaha… :smiley: Now I know :grin: Thanks for reminding :smile:

@Italo Do you know why is this problem arising.

There is a Pixel Blur Effect until dragged.


That’s because the slider is drawn before the canvas resizing is finished.
Make sure to call the slider procedure after the canvas is resized.

If that doesn’t help, try adding a clock and draw the slider after 100 or 200 milliseconds to give time to the canvas to finish resizing.

1 Like

I tried to use When Screen Initialize block but that to did not work

Please read my previous reply and do what I suggested there.

Also, I uploaded an aia file with an example and I remember it didn’t have that problem you are having. Please check it there and see how I did it.