Slider in Figma

2 min tutorial on how to design interactive sliders in Figma.
Slider is one of the most common UI controls on the web and in mobile apps. We will create a slider using simple basic elements (2 rectangles and one ellipse). We will create two states for the slider using component variants. After that, we will add a simple On Drag animation between two variants so the user can interact with the slider using the mouse.
----
Twitter: / 101babich
Instagram: / 101babich
#slider #sliders #uidesign #ui #userinterface #userexperience #ux #productdesign #uidesigntutorial #userinterfacedesign #designinfigma

[@indiangaming9481]

Quiet easy and Nice 💕

[@YasserShaaf]

Good practice for beginner

[@martinique05]

Good. The next thing what I'm looking for is to slide along a circle. So not from left to right but 360 degrees. Has anyone experience?

[@rodrigoribeiro9574]

what keys did you click to create groups 1 and 2 within component 1

[@yizuss69]

you do Alt + left mouse click to copy what u want

[@paulandrews4767]

my slide bar turns 180 degrees when the circle moves back and forth respectively. Why would that be you think?

[@DanielSOlmstead]

My guess is that you copied the first slider you made and then flipped it rather than moving the slider handle over manually? With Smart Animate, Figma will rotate the objects that were rotated or flipped when designing.

[@CDRClarisse]

Problem I am having is that I am trying to make a long list and the scroll is supposed to show how much is left. It only goes top to bottom, I can't stay in the middle of the list. How do you get it to stay half way?

[@zaynstudio5658]

There is no way to stay in middle
You just need to show how your design will work, rest of design developer can do easily by coding 😊

[@meitameyer5418]

Maybe by adding more variation of components ? Like on the video there were two ( top, bottom ) 1:29 . we can add more components that stop in the middle.

[@guitaranswerguy]

Strange. Doesn't work for me. Dragging simply triggers the animation to switch to the other state--it doesn't allow actual dragging.

[@papykillme]

Make sure that objects have the same name

[@gabrielsurpat1074]

Same here. I think some update change the functionality and now we should find a different way to do it. Unfortunately I don't find a way yet.

[@jorjie9377]

@@gabrielsurpat1074 dude top comment is absolutely right. Just check name of layers. Make sure about same name on layers. Name hierarchy not a joke on Figma.

[@technostdnt8342]

You should make a variant copy of the first one after you change it into a component

[@SuperRomanHoliday]

that sounds like a good idea dude, I'll give that a whirl thanks - animate between variants sounds logical@@technostdnt8342