yes there is an example. Not exactly your desire, but a start and the important thing, the range.
Code:
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
// Identify this question
var thisQuestion = $('#question{QID}');
// Assign column-specific classes
$('table.subquestion-list tr', thisQuestion).each(function(i) {
$('> *:gt(0)', this).each(function(i){
$(this).addClass('column-'+(i+1));
$(this).attr('data-column', i+1);
});
});
// Hide the text inputs in columns 2
$('.column-2 input[type="text"]', thisQuestion).hide();
// Define the select element (dropdown)
var select1 = '<select class="inserted-select"> \
<option value="">-- Bitte, wählen --</option> \
<option value="Europa">Europa</option> \
<option value="Afrika">Afrika</option> \
<option value="Asien">Asien</option> \
<option value="Amerika">Amerika</option> \
<option value="Australien">Australien</option> \
</select>';
// Insert the select elements into column 2
$('.answer-item.column-2').append(select1);
// Initial dropdown values in column 2 (if the question has already been answered)
$('.answer-item.column-2 input[type="text"]').each(function(i){
if($.trim($(this).val()) != '') {
$(this).closest('td').find('.inserted-select').val($.trim($(this).val()));
}
});
// Listener on the dropdowns (insert selected values into hidden text input)
$('.inserted-select').change(function() {
var thisInput = $(this).closest('td').find('input[type="text"]');
$(thisInput).val($(this).val());
checkconditions($(thisInput).val(), $(thisInput).attr('name'), 'text');
});
// Insert the sliders
$('.answer-item.column-3 input[type="text"]', thisQuestion).each(function(i) {
$(this).closest('td').addClass('with-slider');
var thisValue = $(this).val();
var thisValueArr = thisValue.split(',');
var sliderValues = [];
if(thisValueArr.length > 1) {
$(thisValueArr).each(function(i) {
sliderValues.push(Number(this));
});
}
else {
sliderValues = [1, 12];
}
$(this).bootstrapSlider({
'min': 1,
'max': 12,
'step': 1,
'range': true,
'value': sliderValues,
'tooltip': 'always'
});
// Initialization stuff
if(thisValue == '') {
$(this).val('');
$(this).closest('td').find('.tooltip').hide();
}
else {
updateCallOut($(this).closest('td'));
}
});
// A function to insert months in the slider callout
function updateCallOut(el) {
var thisTooltip = $(el).find('.tooltip');
var thisValueArr = $(el).find('input[type="text"]').val().split(',');
var months = {
1: 'Januar',
2: 'Februar',
3: 'März',
4: 'April',
5: 'Mai',
6: 'Juni',
7: 'Juli',
8: 'August',
9: 'September',
10: 'Oktober',
11: 'November',
12: 'Dezember'
};
var startMonth = months[thisValueArr[0]];
var endMonth = months[thisValueArr[1]];
var callOutText = startMonth;
if(startMonth != endMonth) {
callOutText = startMonth+'-'+endMonth;
}
$('.tooltip-inner', thisTooltip).text(callOutText);
thisTooltip.show().css('margin-left', '-'+(thisTooltip.width()/2)+'px');
}
// Listener on sliders
$('td.with-slider .slider').on('mousedown', function(event, ui) {
updateCallOut($(this).closest('td'));
});
$('td.with-slider input[type="text"]', thisQuestion).on('slide slideStop', function(event, ui) {
updateCallOut($(this).closest('td'));
checkconditions($(this).val(), $(this).attr('name'), 'text');
});
// Listener on resizing (override the bootstrap callout behaviour)
$(window).resize(function() {
$('td.with-slider', thisQuestion).each(function(i) {
if($('input[type="text"]', this).val() != '') {
updateCallOut(this);
}
});
});
// Some clean-up styles (could be placed in template.css
$('select', thisQuestion).css({
'border': '2px solid #dce4ec',
'padding': '0.7em',
'border-radius': '4px'
});
$('.slider.slider-horizontal', thisQuestion).css({
'margin': '1.7em auto 1em'
});
$('.slider-handle', thisQuestion).css({
'top': '-4px'
});
});
</script>
