Creating a Slide Bar

[Michi2]

Hey

I want to create a movable slider as shown in the attached image for an app. The slider (V) should be able to stop at each point on the slider bar. This is intended to be an evaluation tool. A question will be asked, and users will respond using this slider bar. The responses will then be analyzed using a graph.

[VicStrick]

Hey Michi! Do you mind expanding your question a bit with what exactly you need help with? Do you need advice on how to build it? Or how to make it work in a prototype?

[mo_hamwi]

you need to make a component with variant of every stage you want and select the Slider thumb and set on drag interaction to change from variant to another

[Michi2]

Hey VicStrick,

thanks for your response. I need an instruction to build it. I‘ve seen a Tutorial on YouTube, but I don’t have the button ,Combine as Variants“ on the right menu. So I have no Idea, how it is build. In the End I Only need a Prototyp
Thanks for every helpful information

[Michi2]

Hey mo_hamwi,

is there any step by step instruction oder YouTube Tutorial. I‘m a Figma beginner.

Thanks for help

[mo_hamwi]

you can search for “slider with steps in Figma” there is ton of tutorials

[VicStrick]

Hi! Sorry for the late answer

If the issue is that you can’t find “Combine as variants” try the following:

If you only have one Slider built:

• Select your whole Slider
• Look at the very top of the UI and search for this icon and click it (it creates a component)
• Then press “Add Variant” (it will create an identical copy of your component)
• Add as many variants as you have steps with the button on top in step 2 OR with the plus Button under the component (and change it visually for each step)
• And now you can add onClick events on each of the steps
  Here is a picture for making it a bit clearer:
  
  

If you already built every slider “state” make sure that every slider is a component and try again