<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:  'strongly disagree',
      2:  'slightly disagree',
      3:  'neutral',
      4:  'slightly agree',
      5:  'strongly agree'
    };
 
    $('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, 'strongly disagree'],
      [2, 'slightly disagree'],
      [3, 'neutral'],
      [4, 'slightly agree'],
      [5, 'strongly agree'],
    ];
 
    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>