<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 = {
            0 : 'keine Antwort',
            1:    '0:00 Std.',
            2:    '0:15 Std.',
            3:    '0:30 Std.',
            4:    '0:45 Std.',
            5:    '1:00 Std.',
            6:    '1:15 Std.',
            7:    '1:30 Std.',
            8:    '1:45 Std.',
            9:    '2:00 Std.',
            10:    '2:15 Std.',
            11:    '2:30 Std.',
            12:    '2:45 Std.',
            13:    '3:00 Std.',
            14:    '3:15 Std.',
            15:    '3:30 Std.',
            16:    '3:45 Std.',
            17:    '4:00 Std.',
            18:    '4:15 Std.',
            19:    '4:30 Std.',
            20:    '4:45 Std.',
            21:    '5:00 Std.',
            22:    '5:15 Std.',
            23:    '5:30 Std.',
            24:    '5:45 Std.',
            25:    '6:00 Std.',
            26:    '6:15 Std.',
            27:    '6:30 Std.',
            28:    '6:45 Std.',
            29:    '7:00 Std.',
            30:    '7:15 Std.',
            31:    '7:30 Std.',
            32:    '7:45 Std.',
            33:    '8:00 Std.',
            34:    '8:15 Std.',
            35:    '8:30 Std.',
            36:    '8:45 Std.',
            37:    '9:00 Std.',
            38:    '9:15 Std.',
            39:    '9:30 Std.',
            40:    '9:45 Std.',
            41:    '10:00 Std.',
            42:    '10:15 Std.',
            43:    '10:30 Std.',
            44:    '10:45 Std.',
            45:    '11:00 Std.',
            46:    '11:15 Std.',
            47:    '11:30 Std.',
            48:    '11:45 Std.',
            49:    '12:00 Std.'
        };
 
        $('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 = [
            [0, '          0:00 Std.'],
            [48, '12:00 Std.'],
        ];
        var ticksArray2 = [
          [-1, 'keine<br />Antwort'],
          ];
 
        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 -20px;
        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>