Skip to main content

FV Kinesis Support

All the topics, resources needed for FV Kinesis.

FocusVision Knowledge Base

Slider Examples

Below are some examples for changing the default behavior of your Slider Questions. For more information, see Question Types.

1:  Requiring input before submission

This script will add the requirement of an actual click on your sliders. Simply add this code to the surrounding HTML of the slider question ABOVE the ~QTEXT~ and ~QUESTION~.

<script>
$(function(){
	$('#buttonnext').focus(function(e) { 
		if($('[name$="-touched"]').val() == 'no') 
			{
				$(this).attr('onclick', 'javascript: return false;');
				alert('Please provide a slider response.');

			} else {
				$(this).attr('onclick', 'javascript: nextbuttonWait(); document.forms[0].submit();');
			}
	});
})
</script>


For multiple sliders within a matrix:

<script>
$(function(){
    var sliderCollection = $('[name$="-touched"]'),
        sliderResponses = [];

    $('#buttonnext').focus(function(e) {

        sliderResponses = [];
        $.each(sliderCollection, function(i,v){
            sliderResponses.push($(v).val());
        });

        if(!(sliderResponses.indexOf("no") == -1)) {
            $(this).attr('onclick', 'javascript: return false;');

            alert('Please provide a slider response.');

        } else {
            $(this).attr('onclick', 'javascript: nextButtonWait(); document.forms[0].submit();');
        }
    });
});
</script>

2:  Removing Slider Tooltip

This CSS code will allow you to remove the floating tooltip from the slider. You can either add the above to the page with the sliders to change the behavior on an individual page, or just add the property to your theme (without the style tags) to disable the tips for all sliders using the theme.

<style type="text/CSS">
.ui-slider-tooltip { display:none !important; }
</style>

Note: on version 5.8+ the CSS class that handles the slider tooltip in mobile mode is named differently:

<style type="text/CSS">
.ui-slider-popup { display: none !important; }
</style>

3:  Add/Prepend Characters to Slider Tooltip

This script will allow you to prepend characters to the floating tooltip that specifies the value of the slider as you move it. In this example, we prepend a dollar sign to specify that the slider value is currency:

<script type="text/javascript">// <![CDATA[ 
updatefunction = 'SliderUpdate';  
$('.ui-slider-tooltip').prepend('$'); 
function QLABELSliderUpdate(event,ui,label)  
{  
$('.ui-slider-tooltip').prepend('$');  
} 
// ]]></script>

Note that in this example, QLABEL must be replaced by the question label of the slider you are customizing.

4:  Add Images or Labels to Slider Position Markers

The following example should be placed after the slider you're attempting to customize, either in the question HTML or in an extra text immediately following on the same page. It will place the labels at the marker positions; the width of the slider must be wide enough to accommodate the labels, or else it will be difficult to differentiate the scale.

 <script type="text/javascript"><!--
 // Ex: sliderLabels("Qdatapoint", ["Label 1", "Label 2", "Label 3", "Label 4"]);
 // See bottom for the function call - specify the slider datapoint and each of the custom labels in a document.ready after.   
 // This example assumes default single slider of horizontal layout.  

 function sliderLabels(question, labels) {
   var el = $("#"+question+"-slider");
   var v = ($(el).slider("option", "max") - $(el).slider("option&ququot;, "min") + 1) / $(el).slider("option", "step");
   var w = parseInt($(el).css("width")) / (v - 1); 
   $(el).css("margin-left", w / 2);
   $(el).css("margin-right", w / 2);
   var s = "<table style='width: "+(w * v)+";' border='0'><tr style='font-size: 14px; text-align: center;'>";
   for (var i = 0; i < v; i++) {
     if (i < labels.length)
       s += "<td style='width: "+w+"px; padding-top: 20px;'>"+labels[i]+"</td>";
   }
   s += "</tr></table>";
   $(el).parent().append(s);
 }

$(document).ready(function() {
  sliderLabels("Q1", ["Alpha", "Beta", "Gamma", "Delta"]);
});

 // --></script>

5:  Add decimals to Slider questions and further customization

You can customize the slider by defining a custom step, min, and max value to your slider with the following jQuery in the surrounding HTML of your question.

<script type="text/javascript">// <![CDATA[
$(function(){
   $("#Q1-slider").slider({
       step: .01,
       min: 0,
       max: 1
    });
});
// ]]></script>
~QTEXT~~QUESTION~
  • Was this article helpful?