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 App Inventor!

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.

blocks3

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

17 Likes

Nice, Very Advance Guide :+1:

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

3 Likes

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

4 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