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 = {
-7: '-7',
-6: '-6',
-5: '-5',
-4: '-4',
-3: '-3',
-2: '-2',
-1: '-1',
0: '0',
1: '1',
2: '2',
3: '3',
4: '4',
5: '5',
6: '6',
7: '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 = [
[-7, '-7'],
[-6, '-6'],
[-5, '-5'],
[-4, '-4'],
[-3, '-3'],
[-2, '-2'],
[-1, '-1'],
[0, '0'],
[1, '1'],
[2, '2'],
[3, '3'],
[4, '4'],
[5, '5'],
[6, '6'],
[7, '7'],
];
insertSliderTicks('{QID}', ticksArray);
});
/* 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>');
});
});
}
</script>
<style type="text/css">/* Slider Tick Marks */
@media only screen and (min-width: 768px) {
.with-inserted-ticks .slider-container {
padding-right: 50px;
padding-left: 50px;
}
}
.with-inserted-ticks .slider-item {
margin-bottom: 50px;
}
.with-inserted-ticks .slider-container .help-block {
margin: 25px 0 0 -20px;
width: 40px;
text-align: center;
}
.with-inserted-ticks .slider-container .help-block.pull-right {
margin: 25px -20px 0 0;
}
.inserted-tick {
position: absolute;
top: 20%;
height: 20px;
width: 5px;
margin-top: -5px;
margin-left: -1px;
background-color: #DDDDDD;
background-color: green;
}
.inserted-tick.left-0,
.inserted-tick.left-100 {
background-color: transparent;
background-color: green;
}
.inserted-tick .tick-text {
position: absolute;
top: 150%;
width: 100px;
margin-left: -50px;
color: #000000;
text-align: center;
}
@media only screen and (max-width: 768px) {
.inserted-tick.left-0 .tick-text {
margin-left: 0px;
text-align: left;
}
.inserted-tick.left-100 .tick-text {
margin-left: -100px;
text-align: right;
}
}
</style>
