This guide will show you how to add a range slider to a Quform form, using the noUiSlider script.

An example of the range slider custom element

Step 1

Add an HTML element to the form, in the settings for it add the following code for the HTML content.

12
<div class="quform-label"><label class="quform-label-text">Range</label></div><div id="range-slider" style="margin-top: 50px;"></div>
<div class="quform-label"><label class="quform-label-text">Range</label></div>
<div id="range-slider" style="margin-top: 50px;"></div>
  • On line 1, replace Range with the range slider label text you want

Step 2

Add a Hidden element to the form, this will store the value of the selected range.

Step 3

Add the following code to your theme functions.php file (or create a plugin for it).

1
2
3
4
add_action('wp_enqueue_scripts', function () {
    wp_enqueue_style('noUiSlider', 'https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/10.1.0/nouislider.min.css', array(), '10.1.0');
    wp_enqueue_script('noUiSlider', 'https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/10.1.0/nouislider.min.js', array(), '10.1.0', true);
});
add_action('wp_enqueue_scripts', function () {
    wp_enqueue_style('noUiSlider', 'https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/10.1.0/nouislider.min.css', array(), '10.1.0');
    wp_enqueue_script('noUiSlider', 'https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/10.1.0/nouislider.min.js', array(), '10.1.0', true);
});
1
2
3
4
5
6
function my_enqueue_scripts()
{
    wp_enqueue_style('noUiSlider', 'https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/10.1.0/nouislider.min.css', array(), '10.1.0');
    wp_enqueue_script('noUiSlider', 'https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/10.1.0/nouislider.min.js', array(), '10.1.0', true);
}
add_action('wp_enqueue_scripts', 'my_enqueue_scripts');
function my_enqueue_scripts()
{
    wp_enqueue_style('noUiSlider', 'https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/10.1.0/nouislider.min.css', array(), '10.1.0');
    wp_enqueue_script('noUiSlider', 'https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/10.1.0/nouislider.min.js', array(), '10.1.0', true);
}
add_action('wp_enqueue_scripts', 'my_enqueue_scripts');

Step 4

Go to Forms → Settings → Custom CSS & JS and at the Custom JavaScript field enter the following code.

1
2
3
45
67
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
jQuery(function ($) {
    if (window.noUiSlider) {
        var slider = document.getElementById('range-slider'),
            $form = $('.quform-form-1'),            setHiddenValue = function () {
                $('.quform-field-1_4').val(slider.noUiSlider.get().join(' - '));            };
 
        if (slider) {
            noUiSlider.create(slider, {
                start: [20, 80],
                connect: true,
                step: 1,
                tooltips: true,
                range: {
                    'min': 0,
                    'max': 100
                }
            });
 
            slider.noUiSlider.on('slide', setHiddenValue);
            setHiddenValue();
 
            $form.on('quform:successStart', function (e, form, confirmation) {
                setTimeout(function () {
                    slider.noUiSlider.reset();
                    setHiddenValue();
                }, 100);
            });
        }
    }
});
jQuery(function ($) {
    if (window.noUiSlider) {
        var slider = document.getElementById('range-slider'),
            $form = $('.quform-form-1'),
            setHiddenValue = function () {
                $('.quform-field-1_4').val(slider.noUiSlider.get().join(' - '));
            };

        if (slider) {
            noUiSlider.create(slider, {
                start: [20, 80],
                connect: true,
                step: 1,
                tooltips: true,
                range: {
                    'min': 0,
                    'max': 100
                }
            });

            slider.noUiSlider.on('slide', setHiddenValue);
            setHiddenValue();

            $form.on('quform:successStart', function (e, form, confirmation) {
                setTimeout(function () {
                    slider.noUiSlider.reset();
                    setHiddenValue();
                }, 100);
            });
        }
    }
});
  • On line 4, replace the number 1 with the form ID
  • On line 6, replace 1_4 with the Hidden element unique ID (from Step 2)
  • On lines 11 to 18 you can configure the range slider to suit, see the noUiSlider options page for more information
Be inspired. © 2024 ThemeCatcher Ltd. 20-22 Wenlock Road, London, England, N1 7GU | Company No. 08120384 | Built with React | Privacy Policy