<script type="text/javascript" charset="utf-8">
  $(document).on('ready pjax:scriptcomplete', function() {
    var thisQuestion = $(
    '#question{QID}');
    $(thisQuestion).slider({
      ticks: [0, 20, 40, 60, 80, 100, 120, 140, 160, 180, 200],
      ticks_labels: ['Label left', '', '', '', '', 'Label mid', '', '', '', '', 'Label right'],
      ticks_snap_bounds: 20,
    });
  });
</script>

<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>