Try this...
<script type="text/javascript" charset="utf-8">
$(document).on('ready pjax:scriptcomplete',function(){
var ticksArray = [
[0, 'Label left'],
[20, ''],
[40, ''],
[60, ''],
[80, ''],
[100, 'Label mid'],
[120, ''],
[140, ''],
[160, ''],
[180, ''],
[200, 'Label right'],
];
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: 50%;
height: 10px;
width: 2px;
margin-top: -5px;
margin-left: -1px;
background-color: #DDDDDD;
}
.inserted-tick.left-0,
.inserted-tick.left-100 {
background-color: transparent;
}
.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>