If you want the thumbs only on top you should consider the link a posted before.
Code:
<script type="text/javascript" charset="utf-8">
$(document).on('ready pjax:scriptcomplete',function(){
// Identify this question
var thisQuestion = $('#question{QID}');
// Define the text strings
var tipTexts = {
1: '-7',
2: '-6',
3: '-5',
4: '-4',
5: '-3',
6: '-2',
7: '-1',
8: '0',
9: '1',
10: '2',
11: '3',
12: '4',
12: '5',
14: '6',
15: '7',
};
$('input:text', thisQuestion).on('slideEnabled',function(){
var thisItem = $(this).closest('li');
// Insert custom tooltip
$('.tooltip-inner', thisItem).addClass('tooltip-inner-1 hidden');
$('.tooltip', thisItem).append('<div class="tooltip-inner tooltip-inner-2">'+tipTexts[$(this).val()]+'</div>');
// Listener on slider
$(this).on('slide slideStop', function(event) {
// Handle dynamic tooltip text
$('.tooltip-inner-2', thisItem).text(tipTexts[$(this).val()]);
});
});
});
</script>
<script type="text/javascript" charset="utf-8">
$(document).on('ready pjax:scriptcomplete',function(){
var ticksArray = [
[1, '-7'],
[2, '-6'],
[3, '-5'],
[4, '-4'],
[5, '-3'],
[6, '-2'],
[7, '-1'],
[8, '0'],
[9, '1'],
[10, '2'],
[11, '3'],
[12, '4'],
[13, '5'],
[14, '6'],
[15, '7'],
];
var ticksArray2 = [
[1, '<img src="/lime3/upload/surveys/769143/images/smiley_red_40.png">'],
[2, ''],
[3, ''],
[4, ''],
[5, ''],
[6, ''],
[7, ''],
[8, '<img src="/lime3/upload/surveys/769143/images/smiley_yellow_40.png">'],
[9, ''],
[10, ''],
[11, ''],
[12, ''],
[13, ''],
[14, ''],
[15, '<img src="/lime3/upload/surveys/769143/images/smiley_green_40.png">'],
];
insertSliderTicks('{QID}', ticksArray);
insertSliderTicks2('{QID}', ticksArray2);
});
/* Insert Slider Tick Marks */
function insertSliderTicks(qID, ticksArray) {
var thisQuestion = $('#question'+qID);
$(thisQuestion).addClass('with-inserted-ticks');
$('input:text', thisQuestion).on('slideEnabled',function(){
var thisSlider = $(this);
var thisItem = $(thisSlider).closest('li');
var thisMin = $('.slider-handle:eq(0)', thisItem).attr('aria-valuemin');
var thisMax = $('.slider-handle:eq(0)', thisItem).attr('aria-valuemax');
var thisRange = thisMax - thisMin;
$.each(ticksArray, function(i, val) {
var tickRelativePosition = val[0] - thisMin;
var tickPercent = (tickRelativePosition/thisRange)*100;
// Insert tick marks
$('.slider-handle:eq(0)', thisItem).before('<div class="inserted-tick left-'+tickPercent+'" style="left: '+tickPercent+'%">\
<div class="tick-text">'+val[1]+'</div>\
</div>');
});
});
}
/* Insert Slider Tick Marks */
function insertSliderTicks2(qID, ticksArray2) {
var thisQuestion = $('#question'+qID);
$(thisQuestion).addClass('with-inserted-ticks');
$('input:text', thisQuestion).on('slideEnabled',function(){
var thisSlider = $(this);
var thisItem = $(thisSlider).closest('li');
var thisMin = $('.slider-handle:eq(0)', thisItem).attr('aria-valuemin');
var thisMax = $('.slider-handle:eq(0)', thisItem).attr('aria-valuemax');
var thisRange = thisMax - thisMin;
$.each(ticksArray2, function(i, val) {
var tickRelativePosition = val[0] - thisMin;
var tickPercent = (tickRelativePosition/thisRange)*100;
// Insert tick marks
$('.slider-handle:eq(0)', thisItem).before('<div class="inserted-tick2 left-'+tickPercent+'" style="left: '+tickPercent+'%">\
<div class="tick-text">'+val[1]+'</div>\
</div>');
});
});
}
</script>
