Range Slider for Elementor Forms

Description

DEMO: https://demo.add-ons.org/demo-range-slider-field/
Document: https://add-ons.org/document-elementor-forms-range-slider-fields/
Pro Version: https://add-ons.org/plugin/elementor-forms-range-slider-fields/

Range Slider for Elementor Forms is a powerful visual enhancement that replaces boring numeral input fields with fully interactive, highly engaging graphical sliders.

Perfect for calculating loan estimates, mortgage rates, budget selectors, pricing filters, or any scenario where users need to select a value within a defined spectrum. Smooth, intuitive, and mobile-friendly, this add-on dramatically boosts your form conversion rates by making data entry fun and effortless.

Features

  • Single & Dual Handle Sliders: Use a classic single-handle slider to pick a specific value, or switch to a dual-handle “range” slider to let users select a “Minimum to Maximum” bracket.
  • 6 Premium UI Skins: Easily customize the look and feel with built-in beautiful skins (Flat, Big, Modern, Round, Sharp, or Square) to seamlessly match your website’s branding without writing any CSS.
  • Complete Range Control: Flexibly define your custom Minimum value, Maximum value, and precision Step intervals (including fractional steps like 0.5 or 0.1).
  • Smart Prefixes & Postfixes: Neatly append currency symbols ($, ) or measurement units (km, kg, years) directly to the numerical slider values for extreme clarity.
  • Custom Step Values (Pro): Want to snap to specific text strings or non-linear numbers? E.g., 1 Month | 3 Months | 6 Months or $10 | $50 | $500.
  • Customizable Grid Marks (Pro): Add visual breakpoints/ticks underneath the slider so users can easily gauge the scale they are interacting with.
  • Responsive & Touch-Ready: Built natively for modern web standards ensuring buttery smooth dragging on iPhones, Androids, iPads, and desktop mice alike.
  • Elementor Conditional Logic Support: Fully compatible with Elementor’s conditional rules—show or hide other form elements based on the exact slider value.

Why You Need It

Sliders visually communicate scale and limits in a way that standard text inputs simply cannot. They reduce cognitive load and prevent “out of bounds” errors because users are physically restricted to picking valid numbers. Upgrade your Elementor Forms today to deliver a premium, app-like user experience.

Screenshots

  • Frontend Working

Installation

Normal installation

  1. Download the range-slider-for-elementor-forms.zip file to your computer.
  2. Unzip the file.
  3. Upload the range-slider-for-elementor-forms directory to your /wp-content/plugins/ directory.
  4. Activate the plugin through the ‘Plugins’ menu in WordPress.
  5. Document: https://add-ons.org/document-elementor-forms-range-slider-fields/

Reviews

Read all 1 review

Contributors & Developers

“Range Slider for Elementor Forms” is open source software. The following people have contributed to this plugin.

Contributors

Changelog

1.0.1

  • Fixed: Show input
  • Fixed: Compatible with Repeater Plugin

1.0.1

  • Added: required if value = 0

1.0

  • Version 1.0 Initial Release