Well, not out of the box but I got to playing a bit and wrote a small jQuery plugin to apply vertical sliders to multi-numeric questions.
1) Create your multi-numeric question. Do NOT use any of the slider advanced settings.
2) Add the following to the end of template.js. Replace "QQ" (line 5) with the question ID and adjust the options in the function call as desired.
$(document).ready(function(){
// Call the vertical slider plugin with the question ID
// Edit options here as desired
$('#questionQQ').lsVerticalSlider({
minValue :0, // Minimum value (default 0)
maxValue :200, // Maximum value (default 100)
startValue :100, // Start value (default null)
step :10, // Slider increments (default 1)
height :100, // Height of slider in pixels (default 200)
recordStart :true, // Record the start value? (default no)
showMin :true, // Show minimum value? (default no)
showMax :true // Show maximum value? (default no)
});
});
// NO EDITING REQUIRED BELOW HERE
// A jQuery plugin to convert multiple-numeric questions to vertical sliders
(function( $ ){
$.fn.lsVerticalSlider = function(options) {
// The defaults, extended and modified with any passed in the function call
var opts = $.extend( {
minValue :0,
maxValue :100,
startValue :'',
step :1,
height :150,
recordStart :false,
showMin :false,
showMax :false
}, options);
return this.each(function() {
var $this = $(this);
// Some classes for the question and sub-questions
$this.addClass('vertical-slider-question');
$('li:[id^="javatbd"]', $this).addClass('vertical-slider-sub-question');
// Loop through the sub-questions
$('li:[id^="javatbd"]', $this).each(function(i){
var itemID = $(this).attr('id').replace(/javatbd/, '');
// Check for pre-existing answer
if($('#answer'+itemID).val() != '') {
opts.startValue = $('#answer'+itemID).val();
}
// Insert the slider elements
$('#answer'+itemID).after(
'<div class="vertical-slider-max-min" style="height:'+(opts.height+2)+'px;"> \
<div class="vertical-slider-max"></div> \
<div class="vertical-slider-min"></div> \
</div> \
<div id="vertical-slider-'+itemID+'" class="vertical-slider" style="height:'+opts.height+'px;"></div> \
<div class="vertical-slider-callout-wrapper" style="height:'+(opts.height+2)+'px;"> \
<div class="vertical-slider-callout" id="slider-callout-'+itemID+'"></div> \
</div>'
);
// Show min/max if option is set
if(opts.showMax) {
$('.vertical-slider-max', $this).text(opts.maxValue);
}
if(opts.showMin) {
$('.vertical-slider-min', $this).text(opts.minValue);
}
// Initiate the slider
$('#vertical-slider-'+itemID).slider({
orientation: 'vertical',
range: 'min',
min: opts.minValue,
max: opts.maxValue,
value: opts.startValue,
step: opts.step,
slide: function(event, ui) {
$('#answer'+itemID).val(ui.value);
$('#slider-callout-'+itemID).text(ui.value);
setTimeout(function() {
$('#slider-callout-'+itemID).css({ 'bottom':$('#vertical-slider-'+itemID+' .ui-slider-handle').css('bottom') }).show();
}, 10);
},
create: function(event, ui) {
// Initial values and positions
if($('#answer'+itemID).val() != '') { // Pre-existing answer
$('#slider-callout-'+itemID).text(opts.startValue);
}
else if(opts.recordStart) { // Record the start value (if option is set)
$('#answer'+itemID).val(opts.startValue);
$('#slider-callout-'+itemID).text(opts.startValue);
}
else {
$('#slider-callout-'+itemID).hide();
}
$('#slider-callout-'+itemID).css({ 'bottom':$('#vertical-slider-'+itemID+' .ui-slider-handle').css('bottom') });
}
});
});
});
};
})( jQuery );
3) Add the following to the end of template.css (these styles are for the default template):
/* Vertical slider styles and overrides */
.vertical-slider-question p.tip {
display: none;
}
.vertical-slider-sub-question {
float: left;
margin: 0 3em 0 0 !important;
}
.vertical-slider-question label {
display: block;
padding: 0 0 0.75em 0 !important;
}
.vertical-slider-question span.input {
padding: 0.3em 0 0 0;
display: block;
}
.vertical-slider-question input.text {
display: none;
}
.vertical-slider {
float: left;
border-radius: 4px;
}
.vertical-slider-question .ui-slider-handle {
top: auto;
border-radius: 4px;
}
.vertical-slider-max-min,
.vertical-slider-callout-wrapper {
float: left;
position: relative;
}
.vertical-slider-callout-wrapper {
min-width: 3em;
}
.vertical-slider-max-min {
margin-right: 0.5em;
}
.vertical-slider-max,
.vertical-slider-min {
font-size: 0.8em;
color:#666666;
line-height: 1;
}
.vertical-slider-max {
margin-top: -0.5em;
}
.vertical-slider-min {
position: absolute;
right: 0;
bottom: 0;
margin-bottom: -0.5em;
}
.vertical-slider-callout {
position: absolute;
top: auto;
margin: 0 0 -0.6em 0.5em;
padding: 0.1em;
font-size: 0.9em;
color:#000000;
line-height: 1;
background: #F8F8FF;
border: 1px solid #D2E0F2;
border-radius: 4px;
}
So, the result is:
Here is a sample survey and template. Note that in this sample, to make it more portable, I have called the plugin using more generic selectors (simply the first and second questions) instead of using the question IDs.
