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:

procedures_callnoreturn

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

blocks

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)

23 Likes

Nice, Very Advance Guide :+1:

5 Likes

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:

4 Likes

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

6 Likes

Great @Italo :+1:

3 Likes

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.

3 Likes

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:

3 Likes


2 Likes

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.

Blocks

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.

1 Like