Buy Now
Sign in

FAQ search

How can I use a jQuery slider?

Details
Published: Friday, 17 June 2016 16:40

The jQuery UI library that is included with Joomla! 3 includes a slider (see here) that can be used to select values from a range. This is similar to a drop-down or a radio button group but can be more user friendly. This FAQ describes how to create a simple slider to work in a ChronoForm.

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,
  });
});
and, in the Load CSS action add this to set the slider width:
#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';
?>
Now you should be able to touch and drag on a tablet or phone.

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';
?>
Load CSS
<?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.