FlipSlide gives you full control over how your sliders look. You can adjust colors, borders, line thickness, and opacity to match your store's branding perfectly.
Accent Color
The accent color (also called the primary color) controls the main visual element of the divider line. Depending on the style you've chosen, this color affects different things:
- On most styles, it sets the color of the vertical divider line
- On Neon, it controls the glow color
- On Prism, it's overridden by the rainbow gradient
- On SVG based styles like Wave, Blinds, and Torn Edge, it colors the decorative pattern
To change it, click the color picker next to Accent Color in the slider editor. If you clear the field, it defaults to white.
Handle Color
The handle color sets the background color of the circular drag knob that sits on the divider line. This is separate from the accent color, so you can create contrast between the line and the knob.
For example, you might use a dark accent color for the line and a bright white handle, or match them both to your brand color.
Some styles don't show a knob by default (like Minimal, Dotted, and Invisible). For those styles, the handle color setting has no visible effect unless you turn on the "Show handle knob" toggle.
Border Radius
Border radius controls how rounded the corners of your slider container are. The value goes from 0 (sharp corners) to 50 (very rounded). This is a great way to soften the look of your slider and make it feel more integrated with rounded design elements on your store.
Line Thickness
This setting adjusts how thick the divider line is, measured in pixels. A thicker line is more visible and can make the divider feel more substantial, while a thinner line keeps things subtle.
The default thickness is 3 pixels. Depending on the style, adjusting this can significantly change the look. For example:
- Classic with a thick line becomes more prominent
- Dashed or Dotted lines become bolder with increased thickness
- Double Line spacing changes as the lines get thicker
Handle Opacity
Handle opacity controls how transparent the entire handle area is. At 100%, everything is fully visible. Lower values make the handle more transparent, which can create a more subtle interaction cue.
This affects both the divider line and the knob together. It's useful when you want the slider to blend more naturally with your images.
Matching Your Brand
Here are some practical tips for getting the colors right:
| Goal | Approach |
|---|---|
| Match your brand | Use your brand's primary color as the accent color |
| Keep it subtle | Use a white or light gray accent with reduced opacity |
| High contrast | Use a bright accent color against dark product images |
| Invisible interaction | Set the style to Invisible, or turn off both the line and knob |
All color changes show up immediately in the live preview, so you can experiment until it looks right.
Related Articles
- Labels, Handle, and Line Options for show/hide toggles and label settings
- Slider Styles Guide to pick the right style
- Interaction Modes and Positioning for how customers interact with the slider