Thank you for your help! I would like to use the "tick marks". I like the first picture you share. Howevwer I decided to change the value 11 = not applicable (NAP). I look in the link, copy/paste and modify the code. I have difficulty to understand it. I'll attached what i worked so far. Here is my code :
<strong><span style="font-size:11.0pt"><span style="font-family:"Calibri",sans-serif">Quelles sont les raisons qui t'ont amené à t’inscrire pour cette expérience de stage en dehors de la région?</span></span></strong> <strong><span style="font-size:11.0pt"><span style="font-family:"Calibri",sans-serif">Quelles sont les raisons qui t'ont amené à t’inscrire pour cette expérience de stage en dehors de la région?</span></span></strong> <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: '1',
2: '2',
3: '3',
4: '4',
5: '5',
6: '6,
7: '7',
8: '8',
9: '9',
10: '10',
11: 'NAP'
};
};
$('input:text', thisQuestion).on('slideEnabled',function(){
var thisItem = $(this).closest('li');
// Insert custom tooltip
$('.tooltip-inner', thisItem).addClass('tooltip-inner-1 hidden');
var i0=$(this).val();
i0=Number(i0)+1;
$('.tooltip', thisItem).append('<div class="tooltip-inner tooltip-inner-2">'+tipTexts[i0]+'</div>');
// Listener on slider
$(this).on('slide slideStop', function(event) {
// Handle dynamic tooltip text
var i1=$(this).val();
i1=Number(i1)+1;
$('.tooltip-inner-2', thisItem).html(tipTexts[i1]);
});
});
});
</script> <script type="text/javascript" charset="utf-8">
$(document).on('ready pjax:scriptcomplete',function(){
var ticksArray = [
[1, ' 1'],
[10, '10'],
];
var ticksArray2 = [
[+11, 'NAP'],
];
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>
<style type="text/css">/* Slider Tick Marks */
@media only screen and (min-width: 768px) {
.with-inserted-ticks .slider-container {
padding-right: 30px;
padding-left: 30px;
}
}
.with-inserted-ticks .slider-item {
margin-bottom: 50px;
}
.with-inserted-ticks .slider-container .help-block {
margin: 25px 0 0 -25px;
width: 40px;
text-align: center;
}
.with-inserted-ticks .slider-container .help-block.pull-right {
margin: 25px -20px 0 0;
}
.inserted-tick, .inserted-tick2 {
position: absolute;
top: 50%;
height: 20px;
width: 4px;
margin-top: -5px;
margin-left: -1px;
background-color: #DDDDDD;
background-color: black;
}
.inserted-tick2.left-0,
.inserted-tick2.left-100,
.inserted-tick.left-0,
.inserted-tick.left-100 {
background-color: transparent;
background-color: black;
}
.inserted-tick2 .tick-text {
position: absolute;
top: -250%;
width: 100px;
margin-left: -50px;
color: #000000;
text-align: center;
}
.inserted-tick .tick-text {
position: absolute;
top: 150%;
width: 100px;
margin-left: -20px;
color: #000000;
text-align: center;
}
.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>