LimeSurvey does not offer a range slider but you could insert a custom range slider.
1) Create a multiple-numeric question with 3 sub-questions. Do not implement the LimeSurvey slider.
2) Add the following script to the source of the question. This will hide the answer inputs, insert a range slider and populate the hidden answer inputs with "low", "middle" and "high" percentages.
Code:
<script type="text/javascript" charset="utf-8">
$(document).on('ready pjax:scriptcomplete',function(){
// Identify this question
var qID = '{QID}';
var thisQuestion = $('#question'+qID);
// Path to the LS installation root
var rootPath = location.pathname.split('index.php')[0];
// Hide the answer inputs
$('.subquestion-list', thisQuestion).hide();
// Insert an input for the slider
$('.answer-container', thisQuestion).prepend('<div class="inserted-slider-wrapper"><input id="range'+qID+'" type="text" value="" /></div>');
// Include the Bootstrap slider styles
$('head').append('<link rel="stylesheet" href="'+rootPath+'assets/packages/bootstrap/plugins/slider/css/bootstrap-slider.css" type="text/css" />');
// Get the Bootstrap slider script
$.getScript(rootPath+'assets/packages/bootstrap/plugins/slider/bootstrap-slider.js')
.done(function( script, textStatus ) {
//Initial slider values
var lowValue = 33;
var highValue = 67;
var emptyInputs = $(':text.form-control', thisQuestion).filter(function() {
return $.trim($(this).val()) == '';
});
if(emptyInputs.length == 0) {
lowValue = Number($(':text.form-control:eq(0)', thisQuestion).val());
highValue = Number($(':text.form-control:eq(0)', thisQuestion).val()) + Number($(':text.form-control:eq(1)', thisQuestion).val());
}
// Initate the range slider
$('#range'+qID+'').slider({
min: 0,
max: 100,
step: 1,
range: true,
value: [lowValue,highValue]
})
// Listener on the slider
.on('change', function(e) {
var lowPercent = round((e.value.newValue[0]/100)*100);
var highPercent = round(100 - (e.value.newValue[1]/100)*100);
var middlePercent = round(100 - (highPercent+lowPercent));
// Load the answer inputs
$(':text.form-control:eq(0)', thisQuestion).val(lowPercent).trigger('keyup');
$(':text.form-control:eq(1)', thisQuestion).val(middlePercent).trigger('keyup');
$(':text.form-control:eq(2)', thisQuestion).val(highPercent).trigger('keyup');
handleTooltips();
});
// Insert some custom tooltips
$('.slider-track > div', thisQuestion).append('<div class="inserted-tooltip hidden" />');
handleTooltips();
})
.fail(function( jqxhr, settings, exception ) {
console.log( exception );
});
// A function to handle the custom tooltips
function handleTooltips() {
$(':text.form-control', thisQuestion).each(function(i) {
if($(this).val() != '') {
$('.inserted-tooltip:eq('+i+')', thisQuestion).text($(this).val()+'%').removeClass('hidden');
}
});
}
});
</script>
3) Add the following styles to the question source:
Code:
<style type="text/css">
.inserted-slider-wrapper .slider.slider-horizontal {
width: 100%;
margin: 40px 0 20px 0;
}
.inserted-slider-wrapper .slider-track,
.inserted-slider-wrapper .slider-selection {
box-shadow: none;
background: transparent none;
}
.inserted-slider-wrapper .slider-track-low {
background: red;
}
.inserted-slider-wrapper .slider-selection {
background: orange;
}
.inserted-slider-wrapper .slider-track-high {
background: green;
}
.inserted-slider-wrapper .inserted-tooltip {
position: absolute;
top: -40px;
left: 50%;
padding: 0 5px 2px 5px;
border: 1px solid #ccc;
border-radius: 4px;
transform: translateX(-50%);
}
.inserted-slider-wrapper .tooltip {
display: none !important;
}
</style>
Sample survey attached:
Topic Author
] 
