This guide will show you how to add a range slider to a Quform form, using the noUiSlider script.
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
Rangewith 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
1with the form ID - On line 6, replace
1_4with 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