FlipSlide includes several toggle and text options that control the visibility and placement of labels, the drag handle knob, and the divider line. These give you fine grained control over how clean or informative your slider looks.
Before and After Labels
Every slider has two text labels: one for the "before" side and one for the "after" side. By default, these are set to "Before" and "After," but you can change them to anything that fits your use case.
Some examples:
| Use Case | Before Label | After Label |
|---|---|---|
| Skincare results | Day 1 | Day 30 |
| Home renovation | Original | Renovated |
| Photo editing | Unedited | Retouched |
| Product comparison | Standard | Premium |
To change the labels, simply edit the Before Label and After Label text fields in the slider editor.
Show Labels Toggle
If you'd rather not display any labels at all, uncheck the Show labels toggle. This hides both the before and after labels completely, giving you a cleaner look.
Some styles like Minimal, Dotted, Dashed, Gradient Fade, Spotlight, and Blinds have labels hidden by default as part of their design. The toggle still works, but labels won't appear on these styles regardless of the setting.
Label Position
You can control where your labels appear on the slider by choosing from three positions:
| Position | Placement |
|---|---|
| Bottom | Labels sit near the bottom edge of the slider (this is the default) |
| Top | Labels are placed near the top edge |
| Center | Labels are centered vertically in the slider |
Choose the position that looks best with your images. Top placement works well when the bottom of your images has important content, while center placement can be good for sliders with simple or uniform backgrounds.
Label Color
The label color setting lets you change the text color of your labels. The default is white, which works well against the dark semi transparent label background. If you're using images with lighter areas near the labels, you might want to adjust this for better readability.
Show Divider Line Toggle
The Show divider line toggle controls whether the vertical line between the two images is visible. When turned off, the line disappears completely, but the slider still works. Customers can still drag or hover to reveal the comparison.
This is useful when you want a completely seamless transition between the two images, or when you're using the slider with the Invisible style and want the knob to remain visible without a line.
Show Handle Knob Toggle
The Show handle knob toggle determines whether the circular drag handle appears on the divider. When turned off, the knob disappears but the line remains (if it's enabled).
Some styles already hide the knob by default as part of their design (like Minimal, Invisible, and Dotted). For styles that normally show a knob, this toggle gives you manual control.
Combining Options
You can mix and match these toggles to create exactly the look you want:
| Line | Knob | Labels | Result |
|---|---|---|---|
| On | On | On | Full featured slider with all visual elements |
| On | Off | On | Just the line and labels, no knob |
| Off | On | On | Floating knob with labels, no visible line |
| Off | Off | On | Clean comparison with only labels showing |
| Off | Off | Off | Completely invisible interaction, images only |
Related Articles
- Customizing Colors and Appearance for color and styling options
- Interaction Modes and Positioning for drag vs hover and start position
- Slider Styles Guide for all 30 available styles