Great tutorial! I’ve got a quick question. I have the slider on about 5 pages. Each page has 1 chip that must be selected before the final page where the slider is to be used followed by clicking “update profile”. The issue I am running into is the slider not resetting after I click update profile and try the flow again. Any suggestions?
Did you make sure to use "smart animate" for the interaction? Additionally, it's important to set the interaction to "on drag". I can also check your file if you share the link:)
Great tutorial but I have problems with auto layout, once I create it all elements are in different positions and slider control sets next to sliderbar, not remains on top of it like your did
Thanks for the tutorial. How do we create a more complex version where I can release the slider and not have it jump to 1000 but wherever I release it? I can't seem to find any tutorial that explains how to make something like this.
Heyy, i am unable to see the in between nos. Or unable to move it back and forth as shown. Once draging it moves to 1000 and stop displaying the in between nos.
Thank you I have successfully attempted the prototype and working well with 0 to 100. but when I have created 0 to 100 total 10 different slider with values 10, 20, 30.....100. and when I am playing the prototype I am not able drag it to directly from 0 to 100. instead I have to click and drag 10 times to reach to 100, even though I have connected the wire of each component with each other.... for Example I have connected 10 with 20, 30, 40, 50...100 and vice versa for each. Have I made any mistake in here, please let me know
I've tried this three times being very careful to make sure that everything is the same including position in the layers panel but when I get to the part where you use align bottom to show 1000 instead of the 0 in the second variant it wont change the number from 0. Any thoughts?
double check that you're adjusting the size of the number box all the way to 1000 - it should encompass all numbers. Once you "frame" the numbers however, make sure it's the frame itself your adjusting to only show the first number.
Awesome tutorial, thank you. I have a question, if I want to make my slider stop at every other numbers between 1 and 10, does that mean the way you created variants for 1 and 10 I'll also create variants seperately for numbers 2-8 and then link them in the prototype? I don't know if my question is still making sense.😅
Glad it helped! Great question. I think I actually tried this out and found out that yes, that would be the workflow you'd need to apply to achieve this result. However, if you do this, you'll be unable to click and drag the slider in one "slide" from 1-10. You'd have to slide it from 1 > 2, then 2 > 3, then 3 > 4 ... etc. The reason is that figma would anchor onto the nearest number as soon as you'd approach it, forcing you to release your mouse and then click and drag again to move onto the next number. Does that make sense? Now that I think of it, I have to test this again if that's really the case 😄 Mavi
@@mavidesign You are right, that was exactly the case when I tried doing that. I also wish there'll be another method, because what if the numbers were much like say 1 to 100? That'll be a lot of work.😂
@@relaxingwithcomfort yeah 😅 that’s why I usually go for a few use cases when creating prototypes (for demo purposes like moving it from 0-500 and then back to zero) and not going all the way to create full functionality because that might sometimes be counterproductive (like your example). It’s a good sign to start hitting technical limitations of Figma because it shows that you are taking full advantage of the functionality. Figma, after all , is a prototyping tool and it’s inevitable that sometimes you just can’t simulate 100% of the functionality. Maybe Figma will update this specific functionality in the future? Who knows. Would be great though 😊
Hi, idk if I was wrong, but once I tryna drag the slider, It just moves very fast to 100. I try to drag it slowly but didn't appear to get middle value like 30 or even 50. Did you know how to fix it?
@@BastiaanNetjes Yeah… make sure you collapse the ‘folder’ ‘Numbers’ before selecting it. (On the left hand side of Figma) If you select the actual number Text underneath it won’t work. So click Numbers so that the Text underneath is hidden, then click the word Numbers…
How do you make it stop at one number?
Amazing tutorial Mavi. Thanks, It worked perfectly.
love this, how do you create a state so it stops at it?
Many thanks for this. Took me a couple of attempts but I filled in some gaps in my figma knowledge doing so.
Thanks for the tut, you rock buddy!
This is so helpful, thank you so much!
Amazing tutorial!! Just used this for my bootcamp project
Awesome! Best of luck to you!
Great, thank you!!!
Great tutorial! I’ve got a quick question. I have the slider on about 5 pages. Each page has 1 chip that must be selected before the final page where the slider is to be used followed by clicking “update profile”. The issue I am running into is the slider not resetting after I click update profile and try the flow again. Any suggestions?
Hey Im having some issues connecting the number to the slider. Wondering if you have a link to your figma board so I can look at your structure.
same my slider wont show the number between
Did you make sure to use "smart animate" for the interaction? Additionally, it's important to set the interaction to "on drag". I can also check your file if you share the link:)
I’m having a similar issue with my number not showing the numbers in between the first and last number when I slide. Could you help ?
Hey man, the component only stop at both ends any idea how to make it stay inbetween
You need to make multiple variants at different spots
@@tawsifkawser8990 yeah right
Great tutorial but I have problems with auto layout, once I create it all elements are in different positions and slider control sets next to sliderbar, not remains on top of it like your did
Thanks for the tutorial. How do we create a more complex version where I can release the slider and not have it jump to 1000 but wherever I release it? I can't seem to find any tutorial that explains how to make something like this.
Same issue I’m also facing. Can’t find any video where I can release the scroll independently.
Why this numbers not stopping in between ?
You need to make multiple variants at different spots
Amazing job! Thanks for sharing :)
Brilliant video
thanks
Heyy, i am unable to see the in between nos. Or unable to move it back and forth as shown.
Once draging it moves to 1000 and stop displaying the in between nos.
for this u need to create a separate separate variations...
Thank you I have successfully attempted the prototype and working well with 0 to 100. but when I have created 0 to 100 total 10 different slider with values 10, 20, 30.....100. and when I am playing the prototype I am not able drag it to directly from 0 to 100. instead I have to click and drag 10 times to reach to 100, even though I have connected the wire of each component with each other.... for Example I have connected 10 with 20, 30, 40, 50...100 and vice versa for each. Have I made any mistake in here, please let me know
hey, have you found an answer to this?
I've tried this three times being very careful to make sure that everything is the same including position in the layers panel but when I get to the part where you use align bottom to show 1000 instead of the 0 in the second variant it wont change the number from 0. Any thoughts?
I have the same problem!
double check that you're adjusting the size of the number box all the way to 1000 - it should encompass all numbers. Once you "frame" the numbers however, make sure it's the frame itself your adjusting to only show the first number.
Awesome tutorial, thank you.
I have a question, if I want to make my slider stop at every other numbers between 1 and 10, does that mean the way you created variants for 1 and 10 I'll also create variants seperately for numbers 2-8 and then link them in the prototype?
I don't know if my question is still making sense.😅
Glad it helped! Great question. I think I actually tried this out and found out that yes, that would be the workflow you'd need to apply to achieve this result. However, if you do this, you'll be unable to click and drag the slider in one "slide" from 1-10. You'd have to slide it from 1 > 2, then 2 > 3, then 3 > 4 ... etc. The reason is that figma would anchor onto the nearest number as soon as you'd approach it, forcing you to release your mouse and then click and drag again to move onto the next number. Does that make sense? Now that I think of it, I have to test this again if that's really the case 😄
Mavi
@@mavidesign You are right, that was exactly the case when I tried doing that.
I also wish there'll be another method, because what if the numbers were much like say 1 to 100? That'll be a lot of work.😂
@@relaxingwithcomfort yeah 😅 that’s why I usually go for a few use cases when creating prototypes (for demo purposes like moving it from 0-500 and then back to zero) and not going all the way to create full functionality because that might sometimes be counterproductive (like your example).
It’s a good sign to start hitting technical limitations of Figma because it shows that you are taking full advantage of the functionality. Figma, after all , is a prototyping tool and it’s inevitable that sometimes you just can’t simulate 100% of the functionality.
Maybe Figma will update this specific functionality in the future? Who knows. Would be great though 😊
@@mavidesign i am from the future, still the same case 😂
Thanks Thanks Thanks
Hi, idk if I was wrong, but once I tryna drag the slider, It just moves very fast to 100. I try to drag it slowly but didn't appear to get middle value like 30 or even 50. Did you know how to fix it?
I have same issue too
@@anakmarodi yup same must be recent figma update
Might be to late for you but I've solved this. Link only the slider button to the variant. Not the entire component
Great tutorial, are you able to implement this in a circular motion? As in a Thermostat...
that is a great question, I don't know yet, but I'm going to find out:))
@@mavidesign interested to know if you solved this one!
Just can’t get the text component to display 1000 at 6:12…. Any idea why it remain a on zero?
Same! Have you solved it?
@@BastiaanNetjes Yeah… make sure you collapse the ‘folder’ ‘Numbers’ before selecting it. (On the left hand side of Figma) If you select the actual number Text underneath it won’t work. So click Numbers so that the Text underneath is hidden, then click the word Numbers…
@@gabrielbrocklesby I got it! Thanks a lot
@@BastiaanNetjes Happy to help, it drove me crazy haha…
but........ they both snap to 0 OR 1000.... so the slider is useless?
my question if drag circle to 100 to 900 leave mouse why circle goes at its position, why cant it stop between these value
Might be to late for you but I've solved this. Link only the slider button to the variant. Not the entire component
Damn! I'm a developper trust me it's easier in code
I was wondering it now… 😂
Why is it so hard for Figma which is a platform made for that purpose to provide such essential and simple button this I can’t understand 🤷♂️
it not work, when i drag the button and slide, i want to stop at a number 500, it already slide to 1000, it don't stop at the right number i want
Might be to late for you but I've solved this. Link only the slider button to the variant. Not the entire component
When you pressed the circle the effect is not coming
same
it. is going back once loose the controll