How can I use a jQuery slider?

The example we will build is to select an amount between zero and 500 by dragging a slider button.

To set up the slider we need to add a Custom Code element in the form Designer tab and add code like this:

<div class='slider' id="amount_slider" ></div> 

Next, in the Setup tab we need to add Load JavaScript and Load CSS actions (or use existing ones).

In the Load JavaScript action add this to configure the slider:

jQuery(document).ready(function(jQ) {
  jQ('#amount_slider').slider( {
    value: 1,
    min: 0,
    max: 500,
    step: 10,
  });
});

#amount_slider {
  width: 400px;
} 

To get the slider to show you need to have the jQuery UI library loading in the page. I prefer to use the jQueryEasy extension to load the libraries automatically from Google Code but you can also load them from Joomla! by adding this to the Load JavaScript action JS Code box:

<?php
JHtml::('jquery.ui');
?> 

Now test and you should have a working slider in your form - working as far as it displays and you can slide the handle along it.

We now need to capture the value - for this demo we will just display it in a read-only form input. That could be a hidden input, or you could use JavaScript to do calculations based on the selected value.

In the Designer tab add a Text input, set the name and id to amount and add readonly=readonly in the Extra Parameters box.

Now edit the JavaScript to call a calc function when the slider is changed:

jQuery(document).ready(function(jQ) {
  jQ('#amount_slider').slider( {
    value: 1,   // sets the initial value
    min: 0,     // sets the minimum value
    max: 500,   // sets the maximum value
    step: 10,   // sets the step size
    slide: calc,
  });

  function calc(event, ui) {
    var amount = parseInt(ui.value);
    jQ('#amount').val(amount);
  };
});

Now, as you move the slider the amount shows in the new input and will be submitted with the other form data.

That completes a basic slider - see the jQuery UI documentation for other settings and options.

To make the slider a little more user friendly we will add a couple more features.

Adding touch drag

If you test the slider in touch phone or tablet you will find that while you can select values by tapping you can't touch and drag. There is an add-on library for jQuery UI that will enable that. Download the file jquery.ui.touch-punch.min.js from here and copy it to a new folder on your site /components/com_chronoforms5/extras/jquery.ui.touch-punch/

Edit the Load JavaScript action to include this code in the JS Files box

<?php
echo JUri::root().'components/com_chronoforms5/extras/jquery.ui.touch-punch/jquery.ui.touch-punch.min.js';
?>

Adding marker pips

It would also help the user to have markers on the slider to show where the values are. The Slider Pips jQuery plug-in will let us do that. Download the JavaScript and CSS files from the Slider Pips page here and copy them to a new folder on your site /components/com_chronoforms5/extras/jquery.slider-pips/ and update the Load JavaScript and Load CSS Files actions to load them.

Load JavaScript:

<?php
echo JUri::root().'components/com_chronoforms5/extras/jquery.slider-pips/jquery-ui-slider-pips.js';
echo "\n"; // this line is important to separate the entries
echo JUri::root().'components/com_chronoforms5/extras/jquery.ui.touch-punch/jquery.ui.touch-punch.min.js';
?>

<?php
echo JUri::root().'components/com_chronoforms5/extras/jquery.slider-pips/jquery-ui-slider-pips.css';
?>

And update the JS Code box to add the Pips options, and to make the labels fully clickable

jQuery(document).ready(function(jQ) {
  jQ('#amount_slider').slider( {
    value: 1,   // sets the initial value
    min: 0,     // sets the minimum value
    max: 500,   // sets the maximum value
    step: 10,   // sets the step size
    slide: calc,
  }).slider('pips', {
    prefix: '$',
    step: 10,
    rest: 'label',
  });
  
  function calc(event, ui) {
    var amount = parseInt(ui.value);
    jQ('#amount').val(amount);
  };

  // enable clicks on the pip labels
  jQ('.ui-slider-label').click( function() {
    var ui;
    ui = {};
    ui.value = jQ(this).data('value');
    calc('', ui);
  });
});

Now we have a slider with neat clickable labels.