The SIMPLEST Way to Create an Interactive SLIDER in Figma (Tutorial)

Visit my STORE: bit.ly/mavi-de...
Explore Mavi Design COURSES : bit.ly/mavi-de...
Download FIGMA for FREE: bit.ly/get-sta...
Take FULL advantage of ALL FIGMA's features: bit.ly/figma-p...
Mobile App UI Design Playlist: • FREE Figma Mobile UI D...
In this video I'll show you how to create an interactive slider component with moving / changing numbers in Figma. We will be using interactive components, instances, variants and prototyping features to achieve the result. The button will also have a "pressed down" / "while pressing" state in order to be more itneractive and pleasant to use. The process I'm about to show you is also one of the simplest ways to do this.
Topics: interactive figma prototype, component with variants, figma ux / ui design
--------
© 2022 Mavi Design

[@adamdaniel5119]

Many thanks for this. Took me a couple of attempts but I filled in some gaps in my figma knowledge doing so.

[@andrewg9787]

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?

[@IAMTHEMUSK]

Damn! I'm a developper trust me it's easier in code

[@wesleivicentini258]

I was wondering it now… 😂

[@paulguido-g5x]

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?

[@kendelcortese8947]

I have the same problem!

[@ramonaliable]

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.

[@rafaeladesouza1401]

same my slider wont show the number between

[@mavidesign]

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

[@anakmarodi]

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 ?

[@newyonface3700]

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

[@RLM647]

hey, have you found an answer to this?

[@ashudhengale2971]

my question if drag circle to 100 to 900 leave mouse why circle goes at its position, why cant it stop between these value

[@Farenheit949]

Might be to late for you but I've solved this. Link only the slider button to the variant. Not the entire component

[@srujansriram]

Great tutorial, are you able to implement this in a circular motion? As in a Thermostat...

[@mavidesign]

that is a great question, I don't know yet, but I'm going to find out:))

[@alejandragarzaa]

@@mavidesign interested to know if you solved this one!

[@MakerCeramics]

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 🤷‍♂️

[@mohsinansari5264]

Why this numbers not stopping in between ?

[@tawsifkawser8990]

You need to make multiple variants at different spots

[@ghostdiaries369]

Hey man, the component only stop at both ends any idea how to make it stay inbetween

[@tawsifkawser8990]

You need to make multiple variants at different spots

[@ghostdiaries369]

@@tawsifkawser8990 yeah right

[@SunnyKumar-nb9hl]

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.

[@HariHaran-wm3os]

for this u need to create a separate separate variations...

[@richouzzz4781]

but........ they both snap to 0 OR 1000.... so the slider is useless?

[@desmondgodswill1857]

Amazing tutorial Mavi. Thanks, It worked perfectly.

[@alantan6786]

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.

[@prajwalmohanta586]

Same issue I’m also facing. Can’t find any video where I can release the scroll independently.

[@relaxingwithcomfort]

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.😅

[@mavidesign]

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

[@relaxingwithcomfort]

@@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.😂

[@mavidesign]

@@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 😊

[@equiz]

Thanks for the tut, you rock buddy!

[@otachiking]

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?

[@anakmarodi]

I have same issue too

[@nicklamela2294]

@@anakmarodi yup same must be recent figma update

[@Farenheit949]

Might be to late for you but I've solved this. Link only the slider button to the variant. Not the entire component

[@franco81111]

Great, thank you!!!

[@Mint2255]

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

[@shaileshpenkar4374]

When you pressed the circle the effect is not coming

[@gabrielbrocklesby]

Just can’t get the text component to display 1000 at 6:12…. Any idea why it remain a on zero?

[@BastiaanNetjes]

Same! Have you solved it?

[@gabrielbrocklesby]

@@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…

[@BastiaanNetjes]

@@gabrielbrocklesby I got it! Thanks a lot

[@gabrielbrocklesby]

@@BastiaanNetjes Happy to help, it drove me crazy haha…

[@jackieqiu7139]

Amazing tutorial!! Just used this for my bootcamp project

[@mavidesign]

Awesome! Best of luck to you!

[@TheSAMRIDH]

Thanks Thanks Thanks

[@ramanified]

thanks

[@meaganmccomiskey5337]

This is so helpful, thank you so much!

[@yanxiao5286]

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

[@Farenheit949]

Might be to late for you but I've solved this. Link only the slider button to the variant. Not the entire component

[@benjamincranwell]

Brilliant video

[@PlamenaMileva-mh8ef]

Amazing job! Thanks for sharing :)

[@ShreedharKasbekar]

it. is going back once loose the controll