How to Create an Interactive Slider Component in Figma | UX Mate

Introduction: Mastering Interactive Components

Hey UX Mates! Welcome to another exciting tutorial. Interactive design elements are crucial for engaging user experiences, and a functional, aesthetically pleasing slider is a fundamental component. Today, we’re diving deep into Figma to create a sophisticated interactive slider using nested components and the powerful “On Drag” interaction.

This tutorial will guide you through creating a slider with steps (0%, 20%, 40%, etc.), a dynamic percentage tooltip, and hover interactions.

Let’s get designing!

How to Create an Interactive Slider Component in Figma

Step 1: Setting Up the Basic Elements

First, we need the core visual elements of the slider.

Slider Background (The Track):
- Create a simple rectangle (or Frame) with rounded edges.
- Give it a subtle stroke and a white fill. (The transcript mentions a frame named slider BG with step lines, but we will focus on the main slider track).
Slider Fill (The Progress):
- Create a second rectangle, matching the height and rounded edges of the background.
- Give it a distinct field color (this will visually represent the filled progress).
The Drag Handle:
- Draw an ellipse to serve as the drag control. Name it drag handle.
- Fill it with white and add a thick stroke that matches the fill color of the Slider Fill rectangle.
- Position it at the extreme left edge of the track.

Alignment Check

Align the Slider Fill rectangle and the Drag Handle over the Slider Background. The Slider Fill should start at a minimal width (e.g., 30px) at the far left, just behind the handle.

Step 2: Creating the Slider Component Set (0% and 100%)

To enable dragging, we need a Component Set with a start state and an end state.

Frame Selection (The 0% State):
- Select all three elements (Slider Background, Slider Fill, Drag Handle).
- Right-click and select Frame Selection (or $\text{Ctrl}+\text{Alt}+\text{G}$ / $\text{Cmd}+\text{Opt}+\text{G}$).
- Name the frame: Slider/Start (or Slider/0). This slash naming convention is key to creating variants.
Create the 100% State:
- Duplicate the Slider/Start frame ($\text{Ctrl}+\text{D}$ / $\text{Cmd}+\text{D}$).
- Name the new frame: Slider/100.
- In Slider/100:
  - Move the drag handle to the extreme right edge.
  - Increase the width of the Slider Fill to match the full width of the parent track/frame.
Create Component Set:
- Select both the Slider/Start and Slider/100 frames.
- Click the “Create Component Set” icon in the toolbar.

Step 3: Setting Up “On Drag” Interactions

We will now link the start and end states with the powerful “On Drag” interaction.

Interaction for 0% to 100%:
- Select the drag handle within the Slider/Start variant.
- Go to the Prototype tab.
- Add an interaction:
  - Trigger: On Drag
  - Action: Change To
  - Destination: Slider/100
  - Animation: Smart Animate (Linear is recommended for sliders).
Interaction for 100% to 0% (Reverse):
- Select the drag handle within the Slider/100 variant.
- Add an interaction:
  - Trigger: On Drag
  - Action: Change To
  - Destination: Slider/Start
  - Animation: Smart Animate (Linear).

Step 4: Creating the Dynamic Percentage Tooltip

Now for the nested component: the dynamic tooltip that shows the percentage.

Create the Tooltip Frame:
- Draw a simple frame (rectangle) with a grayish fill. Name it Tooltip.
- Add a small triangle (polygon) at the bottom, using the same fill color, to give it a speech bubble/tooltip shape.
- Ensure the polygon is nested inside the Tooltip frame.
Create the Percentage Digits:
- Create separate text layers for the percentages you will use (e.g., 0%, 20%, 40%, 60%, 80%, 100%).
- Select all percentage text layers and create an Auto Layout ($\text{Shift}+\text{A}$). Name it Percent Digits.
- Set the Auto Layout to Center Alignment.
Nesting and Clipping:
- Move the Percent Digits Auto Layout inside the Tooltip frame.
- Change the text color to white for visibility.
- Select the Percent Digits Auto Layout and check the Clip Content box.
- Adjust the height of the Percent Digits Auto Layout so that only 0% is visible.

This Tooltip is now ready to be nested and animated vertically to show the different percentages.

Getting confused with the steps?

Watch how to create interactive slider component in Figma in this video.

Step 5: Integrating and Expanding the Component Set

To avoid rework, delete the Slider/100 variant. We’ll start fresh from the Slider/Start (0%) variant.

Nest the Tooltip:
- Move the completed Tooltip component/frame inside the Slider/Start variant.
- Position it centrally above the drag handle.
Create Intermediate Steps (e.g., 20%):
- Duplicate the Slider/Start variant and rename the new variant to Slider/20.
- In Slider/20:
  - Move the drag handle to the 20% step position.
  - Resize the Slider Fill to match the width up to the 20% position.
  - Animate the Tooltip: Select the Percent Digits Auto Layout inside the Tooltip and move it vertically so that 20% is now visible through the clipped window.
Repeat for all steps (40, 60, 80, 100): Follow the steps for Slider/20 to create all the intermediate percentage variants.

Step 6: Adding Hover and Drag Interactions for the Tooltip

We need four variants per step: one with the tooltip visible (for dragging/hover) and one with it hidden (for rest state).

Focus on the 0% (Start) Step:

Start State (No Tooltip):
- Duplicate Slider/Start and rename it Slider/Rest.
- Hide the Tooltip layer in this Slider/Rest variant.
Hover/Drag Interactions (The Crux):
- From Slider/Rest to Slider/Start (Hover On):
  - Select the drag handle inside Slider/Rest.
  - Add interaction: On Mouse Enter $\rightarrow$ Change To Slider/Start (Instant or Smart Animate).
- From Slider/Start to Slider/Rest (Hover Off):
  - Select the drag handle inside Slider/Start.
  - Add interaction: On Mouse Leave $\rightarrow$ Change To Slider/Rest (Instant).

Adding Drag to the 20% Step:

Interaction from 0% to 20%:
- Select the drag handle inside Slider/Start (Tooltip visible).
- Add interaction: On Drag $\rightarrow$ Change To Slider/20 (Smart Animate, Linear).
Interaction from 20% to 0%:
- Select the drag handle inside Slider/20 (Tooltip visible).
- Add interaction: On Drag $\rightarrow$ Change To Slider/Start (Smart Animate, Linear).
Create 20% Rest State:
- Duplicate Slider/20 and rename it Slider/20/Rest.
- Hide the Tooltip layer in this variant.
Hover Interactions for 20%:
- From Slider/20/Rest to Slider/20 (Hover On):
  - Select the drag handle inside Slider/20/Rest.
  - Add interaction: On Mouse Enter $\rightarrow$ Change To Slider/20 (Instant).
- From Slider/20 to Slider/20/Rest (Hover Off):
  - Select the drag handle inside Slider/20.
  - Add interaction: On Mouse Leave $\rightarrow$ Change To Slider/20/Rest (Instant).

Step 7: Testing Your Interactive Slider

Draw a test frame and drag an instance of your Slider/Rest component onto it.
Select the test frame and hit $\text{Shift}+\text{Space}$ to open the Preview window.
Test the Interactions:
- Move your mouse over the handle: The tooltip should instantly appear.
- Drag the handle: The fill should expand, and the percentage number in the tooltip should change smoothly.
- Move your mouse away from the handle: The tooltip should instantly disappear.

Conclusion

By using component variants, nested elements, and combining On Drag, On Mouse Enter, and On Mouse Leaveinteractions, you’ve created a truly professional and interactive slider component. This technique is highly reusable and elevates the quality of your Figma prototypes!

Did you enjoy these techniques? Let me know in the comments below if you’d like more detailed Figma tutorials or if there’s another component you want to master!

Don’t forget to follow UX Mate on Instagram and join our Telegram community for more tips and design prompts!

Join Our Telegram Channel

Telegram Link

Willing to learn UI/UX Design?