Skip to main content

I was pretty excited to see a few people create interactive sliders, that is until I realized that the current drag capabilities only allow for 1 start and 1 end location. This works great if you are starting from zero and dragging it to the very end or to a specific spot. Where it doesn’t work so well is if you want to give your prototype tester the option to drag and stop anywhere on the track.


Request:

It would be a super cool enhancement to allow drag interactions the ability to stop anywhere within the constraints of its parent container.


As a hack;

I tried to break up my slider into 10 equal sections and put a forward and backward interaction on each. The problem with this option is the interaction is very choppy.


I did see an incredible example in the community by Abel Hancock.

Figma

image


image


While it is an awesome example, it would sooooooooooo much nicer if the prototyping drag options came with similar capabilities built in.


Just an idea. I am curious what other people think?

I’m wondering why not simply use scroll for that instead of the drag interaction? You would still be able to drag it to move the head to the desired position.

Hi Gleb, after your post I tried several ways to use scroll. I am not sure how you would set up the interaction for a slider using scroll. Would you still use variants and interactive components?


Can you elaborate on what your thoughts are on this?

Just made it, it was pretty easy. Find an example in this file: https://figma.fun/GfJsF7

Your scroll example has spawned all kinds of new ideas. Thank you.


BTW - Since we still need some sliders to have preset values, I tried to convert the new version into a component then into variants with each one having the scroll stop at each tic. The good is that it works in the sense that our design team can still set the values, the bad is that in the prototype it allows the user to scroll freely but when they let go it always snaps back to the preset value. Getting closer! 😃


Again, thank you.

In my opinion, you may be thinking a bit too much about it. It’s just a prototype, it doesn’t have to (and it can’t) work exactly like the real application. All of these details will be implemented in code in just a couple of lines. My rule of thumb is, if Figma doesn’t have capabilities to implement these details with the same ease as code, then simplify it, it’s only a prototype.

Yeah I fully agree.


With auto layout, variants and now with interactive components our prototypes are looking so real that we have to convince the audience it is only a design. Not a bad problem to have but I agree that it gets to a point where it is overkill. The company I am in, we are in an odd situation as we are just now starting to hire developers so we have had to rely on our designs to pitch the ideas to potential customers and investors. Figma has been invaluable.


Also the slider just happens to be one of my pet projects. Mainly for fun and to see what I can do with it.

do you think there’s a way to use your finger on a tablet? without a mouse or stylus?

Yes, it should be possible.

Newbie question: is this still the best way of creating a slider which can stop at arbitrary points? I would like to have a volume control such that on continuous drag I can set a variable that is used elsewhere (e.g. display the volume level). Thanks!

Reply


Terms & ConditionsCookie settings