A range slider is a type of input field that allows users to select a value within a specified range by sliding a handle or marker along a visual slider track.

Table of contents:

Plugin Installation

Once you’ve downloaded a plugin, you’ll need to install it on your website. Log into your WordPress admin dashboard. Navigate to the “Plugins” section and click on “Add New.” Search for the plugin by name and click “Install Now” once you find it.

After installation, click on “Activate” to activate the plugin.

---

Create a Contact Form 7 Range Slider Action – top

Step 1: Create a new contact form.

Step 2: Click on the form- tag “Range Slider” to add range slider fields to your form.

After adding the range slider field, you can customize its settings. You can adjust the range values, step size, labels, and other appearance options depending on your requirements.

Range Slider Settings

UI Skin to use

These are some skins we offer for your range sliders.

How to set single/double type?

The terms “single” and “double” refer to the number of handles or controls available on the slider. Here’s an explanation of the difference between single and double-range sliders:

• Single Range Slider: has one handle that users can drag along the track to select a value within a predefined range. Users can position the handle anywhere within the range to indicate their desired value. Single range sliders are commonly used when you need users to select a single value within a range, such as selecting a specific price point or choosing a value on a scale.
• Double Range Slider: also known as a dual-handle range slider, features two handles that users can independently manipulate to define a range between two values.  Users can customize the selected range by adjusting the positions of both handles. Double range sliders are useful when you want users to select a range of values, such as selecting a date range, specifying a budget range, or setting a range of quantities

To set, you just want to enter Single or Double in the box:

How to set min/max value, range,start point, and slider step?

• Min and Max Value: The min is the value from where the slider value will start, and the max is the value where the slider value ends. If you choose 200 as min and 1000 as max, the user can select a value in between this range.

Look for the Min/Max boxes and enter the minimum and maximum values for the range in the box. 

<label> Single
    [range range-691 min:200 max:2000 step:10 grid:true grid_num:5]</label>

<label> Double
      [range range-372 type:double min:200 max:1000 step:10 grid:true grid_num:5]</label>

[submit "Submit"]

• Start points: This determines the initial position of the handles. Users can move the handles to select different values within the defined range.

Start point for Single Type: it just for the left handle

Start point for Double Type: it for both left and right handle

• Set Slider Step: The slider step determines the increment or decrement when users slide the range slider handle. To set the step size, look for the “Step” option within the Field Options. Enter the desired numerical value for the step size. For example, if you set the step size to 5, the slider will move in increments of 5 as users interact with it.

How to set custom values? (Customisable grid of values)

It means specifying a specific value or range of values (Customisable grid of values) that the user can select within the slider’s range. By setting a custom value, you can define specific points that the user can choose from, rather than allowing them to select any value within the entire range.

E.g: 

We create custom day values by typing in the check box below as format: Mon|Tue|Wed|Thu|Fri|Sat|Sun

We create custom day values by typing in the check box below in the format: 9|99|999|9999

<label> Custome value for Single
    [range range-659 skin:round custom_values:9|99|999|9999 grid:true]</label>

<label> Custome value for Double
      [range range-776 skin:round type:double custom_values:9|99|999|9999 grid:true]</label>

[submit "Submit"]

Have a look:

How to set handle control for Double Type?

Handle control allows you to define the starting position of the left and right handles on the slider. You can only move within this range.

For the left handles: you can move from 20-40

For the right handle: you can move from 60-80

How to set prefix, postfix?

Typing into your options.

How to show grids?

Table settings

You can see more here:

http://localhost/wall-f/wp-content/plugins/contact-form-7-range-slider/backend/settings.html

---

That’s it! We hope this article helped you learn How to Use Range Slider with Contact Form 7.