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

#slider #sliders #uidesign #ui #userinterface #userexperience #ux #productdesign #uidesigntutorial #userinterfacedesign #designinfigma

[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?

[rubmindswithchacha]

How am I you going to integrate this in to a design I’m working on

[guitaranswerguy]

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

[Bored_Del]

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

[martinique]

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?

[rodrigoribeiro]

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

[syedsufyanpervez]

Honestly speaking, this is a useless interaction, solely because the drag works one variant to the other in a continuous drag and has no effect on the subject e.g. showing content scrolling with the bar drag.

Respect to the author for putting up the video, my comment is specifically pointing at the interaction and not the creators work.