Slider

The Slider option adds a draggable range slider control to your custom widget, allowing users to visually select a numeric value within a defined minimum and maximum range. It provides a more intuitive and interactive alternative to a standard number input field.

Why would someone use it in a custom widget? #

Use this control when you want users to adjust a numeric value – like size, opacity, spacing, or intensity – through a smooth, visual interaction rather than typing. It’s perfect for settings where the relative value (more/less) is more important than the precise number, creating a more polished and user-friendly editing experience.

Where This Option Appears #

• In Widget Builder: You add this control in the Content tab.
• In the Elementor Editor: Once saved, it appears as a horizontal slider bar. Users can drag a handle or click on the bar to set a value, which is also displayed numerically (e.g., “50 PX”).

Available Settings #

Here are the configurable settings for the Slider control:

Basic Settings #

• Label: The name of the control (e.g., “Image Opacity”, “Spacing”).
• Name: The unique machine-readable ID (like image_opacity) for the dynamic shortcode.
• Description: Optional guiding text.
• Min Value: The lowest possible number on the slider (e.g., 0).
• Max Value: The highest possible number (e.g., 100).
• Step: The increment by which the value changes when dragging. A step of 1 allows whole numbers, while 0.1 allows decimals.
• Default Value: The starting position of the slider handle within your min/max range.

Advanced Settings #

• Show Label, Label Block, Responsive Control: Standard options. Responsive Control is key here, allowing different slider values for desktop, tablet, and mobile views.
• Dynamic Support: Allows the slider’s value to be populated from a dynamic source.
• Frontend Available: When enabled, the numeric value is passed to your widget’s JavaScript for interactive front-end logic.
• Separator, Conditions, Control Classes, Selector: Standard advanced options.

Generated Shortcode #

When you add a Slider control with the Name box_opacity, Widget Builder generates the shortcode: {{box_opacity}}.

• What it represents: This shortcode outputs the numeric value selected on the slider (e.g., 75).
• Where to use it: Primarily in the CSS Panel to apply dynamic numeric values, and in the JS Panel for interactive scripts.
  • CSS Panel: .transparent-box { opacity: calc({{box_opacity}} / 100); }
  • JS Panel: element.style.width = '{{slider_width}}px';

How to Use It: A Practical Example #

Let’s create an “Image Overlay” widget where users control the darkness of a color overlay.

1. In Widget Builder’s Content tab, add a Slider control.
2. Set the Label to Overlay Darkness.
3. Set Min Value to 0, Max Value to 100, and Step to 5.
4. Set a Default Value of 40.
5. Add a Color control named overlay_color.
6. In your CSS panel, create a dynamic style using both controls:

.image-overlay::after {
    background-color: {{overlay_color}};
    opacity: calc({{overlay_darkness}} / 100);
}

Now, users can drag the slider to visually control how strong the color overlay appears on their image.

Common Use Cases #

• Opacity & Transparency: Controlling overlay strength, shadow intensity, or element transparency.
• Sizing: Adjusting heights, widths, or border radii visually.
• Spacing: Fine-tuning margins, paddings, or gaps in layouts.
• Interactive Parameters: Controlling animation speed, carousel scroll distance, or zoom levels.
• Rating/Score Visuals: Creating interactive rating displays or progress indicators.

Helpful Tips #

• Set Logical Limits: Use Min and Max values to prevent users from breaking the layout with implausible numbers.
• Choose the Right Step: For percentages or whole pixels, a step of 1 or 5 works well. For more precise adjustments like line-height or opacity, use 0.1.
• Combine with CSS Calc(): For maximum flexibility, use the slider value inside CSS calc() functions to create proportional designs.
• Use Responsive Control: Enabling Responsive Control lets users set different values for different devices—perfect for adjusting spacing or sizes across screen types.
• Consider Units: The slider itself is unitless. You add the unit (px, %, em) in your CSS or HTML where you use the value, giving you flexibility.

The Slider control transforms numeric adjustments into an engaging, intuitive experience, helping you build professional widgets that feel polished and easy to use.

Frequently Asked Questions #