# How do I add a circular silder? **URL:** \ **Category:** Feature Requests\ **Tags:** design\ **Created:** [October 10, 2022, 4:26pm UTC](https://community.thunkable.com/t/how-do-i-add-a-circular-silder/2077157 "2022-10-10T16:26:28Z")\ **Posts on this page:** 12\ **Page:** 1
**Author:** ![1times94is942fjkz](https://avatars.discourse-cdn.com/v4/letter/1/58f4c7/32.png) [@1times94is942fjkz](https://community.thunkable.com/u/1times94is942fjkz)\ **Post date:** [October 10, 2022, 4:26pm UTC](https://community.thunkable.com/t/how-do-i-add-a-circular-silder/2077157/1 "2022-10-10T16:26:28Z")
I want to add a percentage circular sider for my app. Is this possible? ---
**Author:** ![jared](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/jared/32/138473_2.png) [@jared](https://community.thunkable.com/u/jared)\ **Post date:** [October 10, 2022, 7:33pm UTC](https://community.thunkable.com/t/how-do-i-add-a-circular-silder/2077157/2 "2022-10-10T19:33:16Z")
do you have any examples of what you are looking for? what is a circular slider? ---
**Author:** ![afnanfozailcw81](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/afnanfozailcw81/32/147438_2.png) [@afnanfozailcw81](https://community.thunkable.com/u/afnanfozailcw81)\ **Post date:** [October 10, 2022, 9:38pm UTC](https://community.thunkable.com/t/how-do-i-add-a-circular-silder/2077157/3 "2022-10-10T21:38:21Z")
> what is a circular slider? go to [circular slider - Google Search](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) ---
**Author:** ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)\ **Post date:** [October 10, 2022, 9:58pm UTC](https://community.thunkable.com/t/how-do-i-add-a-circular-silder/2077157/4 "2022-10-10T21:58:32Z")
Try this one… 😉 [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](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) ---
**Author:** ![manyone](https://avatars.discourse-cdn.com/v4/letter/m/ee59a6/32.png) [@manyone](https://community.thunkable.com/u/manyone)\ **Post date:** [October 11, 2022, 1:08am UTC](https://community.thunkable.com/t/how-do-i-add-a-circular-silder/2077157/5 "2022-10-11T01:08:10Z")
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: ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/0/0/0026397e944df9b5eec9b5e9e8fd88792dfb07f7.png) you can use these thunkable blocks: ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/7/2/72560e1a54000008649c485ff82d914cb04cd7d9.png) 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. ---
**Author:** ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)\ **Post date:** [October 11, 2022, 2:45am UTC](https://community.thunkable.com/t/how-do-i-add-a-circular-silder/2077157/6 "2022-10-11T02:45:29Z")
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. ---
**Author:** ![1times94is942fjkz](https://avatars.discourse-cdn.com/v4/letter/1/58f4c7/32.png) [@1times94is942fjkz](https://community.thunkable.com/u/1times94is942fjkz)\ **Post date:** [October 11, 2022, 10:52pm UTC](https://community.thunkable.com/t/how-do-i-add-a-circular-silder/2077157/7 "2022-10-11T22:52:26Z")
A circular slider is this: ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/1/5/1504e2a7a12aca1ebdc6fab3b1e6893b26854950.png) ---
**Author:** ![1times94is942fjkz](https://avatars.discourse-cdn.com/v4/letter/1/58f4c7/32.png) [@1times94is942fjkz](https://community.thunkable.com/u/1times94is942fjkz)\ **Post date:** [October 12, 2022, 12:36am UTC](https://community.thunkable.com/t/how-do-i-add-a-circular-silder/2077157/8 "2022-10-12T00:36:22Z")
It shows me an error screen - “Chart error: Error: Unexpected identified - 1:9” It does not load at all on my phone. ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/b/2/b25198a9976447d731710497f04d6638fe522dab.png) Here is my code: ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/4/4/4446639ee3925d3bc3cfa1c41aab76d30c31cd2f.png) ---
**Author:** ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)\ **Post date:** [October 12, 2022, 12:39am UTC](https://community.thunkable.com/t/how-do-i-add-a-circular-silder/2077157/9 "2022-10-12T00:39:56Z")
You’re missing the `Generate JSON from Object` block. Compare your screenshot to @manyone’s. ---
**Author:** ![1times94is942fjkz](https://avatars.discourse-cdn.com/v4/letter/1/58f4c7/32.png) [@1times94is942fjkz](https://community.thunkable.com/u/1times94is942fjkz)\ **Post date:** [October 12, 2022, 12:40am UTC](https://community.thunkable.com/t/how-do-i-add-a-circular-silder/2077157/10 "2022-10-12T00:40:24Z")
The images are not helping me. ---
**Author:** ![1times94is942fjkz](https://avatars.discourse-cdn.com/v4/letter/1/58f4c7/32.png) [@1times94is942fjkz](https://community.thunkable.com/u/1times94is942fjkz)\ **Post date:** [October 12, 2022, 12:41am UTC](https://community.thunkable.com/t/how-do-i-add-a-circular-silder/2077157/11 "2022-10-12T00:41:41Z")
Thank you! It works! ---
**Author:** ![ioannis](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/ioannis/32/146956_2.png) [@ioannis](https://community.thunkable.com/u/ioannis)\ **Post date:** [November 8, 2024, 1:12pm UTC](https://community.thunkable.com/t/how-do-i-add-a-circular-silder/2077157/12 "2024-11-08T13:12:51Z")