Having Fun With Sliders

The Slider layout for a question is one of the nicer features of LimeSurvey, but as a question type it is often ignored or forgotten because it is really an advanced setting of what seems a completely different question type - the multiple numerical question type.

The slider is a variation of the multiple numerical question type because it stores a numeric result. The sliding feature is really just an overlay to give a visual presentation. This article is to provide a quick overview of setting up a basic slider, and then some more advanced topics - so you can, for example, change the slider background, colour and size.

Setting up a Slider

Firstly, create a new question and make it a "Multiple Numerical" question type. Make the question text "How many years have you been using:"

After creating the question you'll need to add at least one 'sub-question'. For the purposes of this example, call it "Computers".

If you preview the question you've just created now, you'll find that it simply provides one text box to enter a number answer for how many years you've been using computers. To make this a slider, rather than an input box, we need to adjust the advanced settings for the question.

Edit the question, and click on "Advanced Settings" to display all the advanced features. Scroll down through those features until you see the Slider section. The first step to enabling the slider is to select "Yes" to the item "Use slider layout". Then there are a series of options that adjust how your slider looks on the page. As a minimum requirement you should fill out a "Slider minimum value" and a "Slider maximum value". These values represent the minimum and maximum value the participant can choose - the minimum value being what number is saved when the slider is slid all the way to the left, and the maximum value being what number is saved when the slider is slid all the way to the right. For our example, set the minimum value to 0 (zero) and the maximum value to 10 (ten).

When the slider is moved by your participant, by default it will move in whole number increments. The size of the increment by which the slider is able to move is controlled with the "Slider accuracy" setting. If you set this to 1 (which is also the default), then only whole number values will be possible. In our example, with a minimum of 0 and a maximum of 10, participants will only be able to save one of the numbers 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10. If we set this to 0.5, then participants would be able to set the slider to save a value of 0, 0.5, 1, 1.5, 2, 2.5 ... and so on through to 10.

Often with slider controls you'll want the slider to start on a particular value. This starting value can be explicitly set using the "Slider initial value" setting. Alternatively, you can set "Slider starts at the middle position" to yes, in which case LimeSurvey will calculate the exact centre position between your minimum and maximum values. For this example, leave the "Slider initial value" blank, and leave the "Slider starts at the middle position" entry on "No". Our slider will start at the very left, representing 0 (zero).

And that's it for sliders. If we save our settings now, and preview the question we'll have a nice simple slider which allows your participants to visually select a number between 1 and 10.

The remaining items in the Slider advanced settings area are "Display slider min and max value", an option which turns on or off a floating number which can display the current value of the slider at any position. I think this is worth leaving on Yes in most circumstances.

The "Slider left/right text seperator" is a value you can enter to allow you to split your "Subquestion title" between the left and the right of the actual slider. To try this out, enter an unusual character (for example the pipe character | )as the value for this setting and then update your question. Now, alter the text for your single subquestion. Instead of just the word "Computer", type this: "Computer|No years|10 years". If you preview the question now, you'll see the words "No years" just to the left of the slider, and "10 years" just to the right. In other words, using the seperator splits your sub-question text into three parts, the sub-question text itself, then a prefix and a suffix to the slider.

Advanced Options

It is possible to adjust the style and layout of the slider elements in quite a bit of detail using CSS. My preferred way of doing this is to use jQuery by adding jQuery CSS modifications in the "Help" section of the question.

Using CSS it is possible to adjust the size, colours and even add a background image to your sliders.

Examples of the sorts of changes you can make are as follows:

To make modifications to the CSS you'll need to use your questions SGQA code. Each slider, and each element within the slider (one for each subquestion) has a unique id, and you can use this to make changes to each one.

Here is an example of the changes required to modify the second example slider above:

<script type="text/javascript">

$("#slider-41748X17X2271").css("background", "transparent");
$("#slider-41748X17X2271").css("width", "590px");
$("#slider-41748X17X2271").css("border", "0");
$("#slider-41748X17X2271").css("margin-top", "57px");
$("#container-41748X17X2271").css("height", "160px");
$("#container-41748X17X2271").css("width", "600px");
$("#container-41748X17X2271").css("background-image", "url(/limesurvey/upload/templates/copy_of_default/scale-beauty.png)");
$("#slider-handle-41748X17X2271").css("border", "2px solid #111");
$("#slider-handle-41748X17X2271").css("background-color", "#F2DCDB");
$("#slider-handle-41748X17X2271").css("height", "55px");
$("#slider-callout-41748X17X2271").css("display", "none");