Create a Dynamic Slider Prototype in Play [Part 1]
🚀 The Ultimate Guide to Become a Product Designer: https://learnproduct.design
In this 2-part series, I will show you how to create a dynamic slider prototype in @CreatewithPlay . In this first part, we will focus only on creating the draggable slider that will store the value of our answer. In the next video, we will set up logic and conditions to display the correct and wrong answer error messages.
🔗 Starter File - https://playapp.createwithplay.com/o/share3/3d76714f1c8080DhCLT/design
🔗 Final File - https://playapp.createwithplay.com/o/share3/3d751c70b82380bvVyn/design
🔗 Part 2 - https://youtu.be/quoqQPQbadE
🚀 Get 2 free months of Skillshare Premium & watch my design course for free: https://skl.sh/2TVhf8z
🚀 Create an account on Mobbin for free:
https://mobbin.com/?via=chethan
🔶 Chapters
00:00 What we will be creating
02:58 Scan QR Code
03:16 Creating the Drag Interaction
29:43 Setting draggable bounds
39:54 Update Text based on Slider position
-------------------------------------------
Mega Product Design Course for Beginners:
https://www.youtube.com/playlist?list=PLERed4ILxkJ1_kDOXCrEGmB58IsLOiIc3
Webflow Course for Beginners:
https://www.youtube.com/playlist?list=PLERed4ILxkJ1N4PxzGE_ywogtBeeOaqc8
Photoshop Tutorials:
https://www.youtube.com/playlist?list=PLERed4ILxkJ372RTmi1rQmfqbIqXr3opi
Illustrator Tutorials:
https://www.youtube.com/playlist?list=PLERed4ILxkJ0pK595gwPLmcVF-P_jx0V1
After Effects Tutorials:
https://www.youtube.com/playlist?list=PLERed4ILxkJ23p3SZD49unrbkh_F8q9Dk
UI Design Tutorials:
https://www.youtube.com/playlist?list=PLERed4ILxkJ1uHAE-_rAxeDMBnhzzmYuW
Design Resources, Tools and Softwares:
https://www.youtube.com/playlist?list=PLERed4ILxkJ1-qY3TQToZWn3vYWVo6EA9
Adobe XD CC Tutorials:
https://www.youtube.com/playlist?list=PLERed4ILxkJ11D_9_jX80GDenpMUWjTtv
eSports Design Tutorials:
https://www.youtube.com/playlist?list=PLERed4ILxkJ3lLdkQmG-Ebw90KdChq56P
--------------------------------------------------------------------------------------------
Contact me :
Portfolio: https://chethankvs.design
Twitter: https://twitter.com/kvschethan
Instagram: https://instagram.com/design_pilot
Mail: designpilot21@gmail.com
Behance: https://behance.net/chethankvs
Dribbble: https://dribbble.com/chethankvs
--------------------------------------------------------------------------------------------
LIKE, SHARE, COMMENT & SUBSCRIBE :)
In this 2-part series, I will show you how to create a dynamic slider prototype in @CreatewithPlay . In this first part, we will focus only on creating the draggable slider that will store the value of our answer. In the next video, we will set up logic and conditions to display the correct and wrong answer error messages.
🔗 Starter File - https://playapp.createwithplay.com/o/share3/3d76714f1c8080DhCLT/design
🔗 Final File - https://playapp.createwithplay.com/o/share3/3d751c70b82380bvVyn/design
🔗 Part 2 - https://youtu.be/quoqQPQbadE
🚀 Get 2 free months of Skillshare Premium & watch my design course for free: https://skl.sh/2TVhf8z
🚀 Create an account on Mobbin for free:
https://mobbin.com/?via=chethan
🔶 Chapters
00:00 What we will be creating
02:58 Scan QR Code
03:16 Creating the Drag Interaction
29:43 Setting draggable bounds
39:54 Update Text based on Slider position
-------------------------------------------
Mega Product Design Course for Beginners:
https://www.youtube.com/playlist?list=PLERed4ILxkJ1_kDOXCrEGmB58IsLOiIc3
Webflow Course for Beginners:
https://www.youtube.com/playlist?list=PLERed4ILxkJ1N4PxzGE_ywogtBeeOaqc8
Photoshop Tutorials:
https://www.youtube.com/playlist?list=PLERed4ILxkJ372RTmi1rQmfqbIqXr3opi
Illustrator Tutorials:
https://www.youtube.com/playlist?list=PLERed4ILxkJ0pK595gwPLmcVF-P_jx0V1
After Effects Tutorials:
https://www.youtube.com/playlist?list=PLERed4ILxkJ23p3SZD49unrbkh_F8q9Dk
UI Design Tutorials:
https://www.youtube.com/playlist?list=PLERed4ILxkJ1uHAE-_rAxeDMBnhzzmYuW
Design Resources, Tools and Softwares:
https://www.youtube.com/playlist?list=PLERed4ILxkJ1-qY3TQToZWn3vYWVo6EA9
Adobe XD CC Tutorials:
https://www.youtube.com/playlist?list=PLERed4ILxkJ11D_9_jX80GDenpMUWjTtv
eSports Design Tutorials:
https://www.youtube.com/playlist?list=PLERed4ILxkJ3lLdkQmG-Ebw90KdChq56P
--------------------------------------------------------------------------------------------
Contact me :
Portfolio: https://chethankvs.design
Twitter: https://twitter.com/kvschethan
Instagram: https://instagram.com/design_pilot
Mail: designpilot21@gmail.com
Behance: https://behance.net/chethankvs
Dribbble: https://dribbble.com/chethankvs
--------------------------------------------------------------------------------------------
LIKE, SHARE, COMMENT & SUBSCRIBE :)