The slider is only available "out-of-the-box" in the Multiple Numerical question type.
In an array-dual-scale-dropdown, you can use custom JavaScript to:
- hide the dropdowns
- insert a slider in each array cell
- select the hidden dropdown value based on the slider value
1)
Set up your survey to use JavaScript
.
2) Create your array-dual-scale-dropdown question with the numerics you require as answer options for each scale.
3) Add the following script to the source of the array. Replace "QQ" with the array
question ID
.
Code:
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
insertSlider (QQ);
function insertSlider (qID) {
$('#question'+qID+' select').each(function(i, el){
// Hide the dropdown
$(el).hide();
var id = $(el).attr('id').replace(/#/g,'-');
// Some dropdown values
var currentVal = Number($('option:selected', el).val());
var firstVal = Number($('option[value!=""]:first', el).val());
var secondVal = Number($('option[value!=""]:first', el).next('option').val());
var lastVal = Number($('option:last', el).val());
// Insert a a container for the slider
var container = $('<div class="customSliderWrapper"></div>').insertAfter(el);
// Insert a callout
var callout = $('<div id="callOut-'+id+'" class="customCallout"></div>').appendTo(container).text($('option:selected', el).val());
// Initiate the slider
var slider = $('<div id="slider-'+id+'" class="customSlider"></div>').appendTo(container).slider({
min: firstVal,
max: lastVal,
range: 'min',
value: currentVal,
step: secondVal - firstVal,
slide: function( event, ui ) {
$('option[value="'+ui.value+'"]', el).attr('selected', 'selected');
//$('#callOut-'+id).text($('option:selected', el).val()).css({'left': $('#slider-'+id+' .ui-slider-handle').css('left')});
function updateCustomCallout() {
$('#callOut-'+id).text($('option:selected', el).val()).css({'left': $('#slider-'+id+' .ui-slider-handle').css('left')});
}
// Delay updating the callout because it was picking up the last postion of the slider
setTimeout(updateCustomCallout, 10);
}
});
// Change the slider if the dropdown is changed
// (not required if dropdown is hidden)
$(el).change(function() {
slider.slider('value', Number($('option:selected', el).val()));
$('#callOut-'+id).text($('option:selected', el).val());
});
// Set a value as soon as the slider handle is clicked
$('#slider-'+id+' .ui-slider-handle').mousedown(function() {
$('option[value="'+slider.slider('value')+'"]', el).attr('selected', 'selected');
$('#callOut-'+id).text(slider.slider('value'));
});
});
}
});
</script>
4) Add the following styles to template.css (these are for the default template and may need to be tweaked for others):
Code:
.customCallout {
position: relative;
width: 50px;
text-align: left;
height: 1.75em;
font-weight: bold;
margin-left: -0.3em;
}
.customSliderWrapper {
position: relative;
margin: 0 10px;
}
Topic Author
