How do I add a circular silder?

I want to add a percentage circular sider for my app. Is this possible?

1 Like

do you have any examples of what you are looking for? what is a circular slider?

what is a circular slider?

go to https://www.google.ca/search?q=circular+slider&hl=en&tbm=isch&sxsrf=ALiCzsYezvniWke15wAQTwHm_8r-q_-THg%3A1665437864577&source=hp&biw=1280&bih=648&ei=qJBEY4fBHr-aptQP-riW6Ac&iflsig=AJiK0e8AAAAAY0SeuOAKdqINEKoELvPF_Eju_8ETmNBK&oq=cir&gs_lcp=CgNpbWcQAxgAMgQIIxAnMggIABCABBCxAzIICAAQgAQQsQMyCAgAEIAEELEDMggIABCABBCxAzIICAAQgAQQsQMyCAgAEIAEELEDMggIABCABBCxAzIFCAAQgAQyCAgAEIAEELEDUABY6AdgxQ1oAXAAeACAAV-IAeMCkgEBNJgBAKABAaoBC2d3cy13aXotaW1n&sclient=img

Try this one… :wink:

https://www.google.ca/search?q=circular+slider+phone&tbm=isch&ved=2ahUKEwis--CK1Nb6AhVprWoFHdMJDIwQ2-cCegQIABAA&oq=circular+slider+phone&gs_lcp=CgNpbWcQAzoECAAQQzoGCAAQBxAeOgYIABAIEB46CQgAEIAEEAoQGDoHCAAQgAQQGDoECAAQHjoGCAAQBRAeUI0EWNMOYMoPaABwAHgAgAHDAYgB6gOSAQM1LjGYAQCgAQGqAQtnd3Mtd2l6LWltZ8ABAQ&sclient=img&ei=cZVEY-z-MunaqtsP05Ow4Ag&bih=648&biw=1280&hl=en

there is no circular slider in thunkable.
but if you’re interested in a radial gauge (it shows the value, but it doesn’t allow real time adjustment), like this:

you can use these thunkable blocks:

btw, the url string starts with
https://quickchart.io/chart?width=500&height=300&c=

simply supply the value as a 1-list item in the data property inside the datasets object.

3 Likes

So theoretically, you could supply a list of JSON strings with “data” values from 0 to 100 to join with the “https://…” string and use a loop to cycle through the list items in order to increment the radial value and animate the green area of the ring. But controlling that value wouldn’t be easy. It could be done with a horizontal slider component but that sort of defeats the purpose of having the circular slider on screen.

You could maybe overlay a canvas to detect the touch position but… I dunno, just thinking out loud here.

3 Likes

A circular slider is this:

image

It shows me an error screen - “Chart error: Error: Unexpected identified - 1:9”

It does not load at all on my phone.

Here is my code:

You’re missing the Generate JSON from Object block. Compare your screenshot to @manyone’s.

The images are not helping me.

Thank you! It works!

1 Like