20%          30%                       50%
|-- <30 --M---- 30-40 ------M------------- 40+ ---------------|

<script type="text/javascript" charset="utf-8">  
  $(document).on('ready pjax:scriptcomplete',function(){
 
    // Identify this question
    var qID = '{QID}';
    var thisQuestion = $('#question'+qID);
 
    // Path to the LS installation root
    var rootPath = location.pathname.split('index.php')[0]; 
 
    // Hide the answer inputs
    $('.subquestion-list', thisQuestion).hide();
 
    // Insert an input for the slider
    $('.answer-container', thisQuestion).prepend('<div class="inserted-slider-wrapper"><input id="range'+qID+'" type="text" value="" /></div>');
 
    // Include the Bootstrap slider styles
    $('head').append('<link rel="stylesheet" href="'+rootPath+'assets/packages/bootstrap/plugins/slider/css/bootstrap-slider.css" type="text/css" />');
 
    // Get the Bootstrap slider script
    $.getScript(rootPath+'assets/packages/bootstrap/plugins/slider/bootstrap-slider.js')
      .done(function( script, textStatus ) {
 
        //Initial slider values
        var lowValue = 33;
        var highValue = 67;
        var emptyInputs = $(':text.form-control', thisQuestion).filter(function() {
          return $.trim($(this).val()) == '';
        });
        if(emptyInputs.length == 0) {
          lowValue = Number($(':text.form-control:eq(0)', thisQuestion).val());
          highValue = Number($(':text.form-control:eq(0)', thisQuestion).val()) + Number($(':text.form-control:eq(1)', thisQuestion).val());
        }
 
        // Initate the range slider
        $('#range'+qID+'').slider({
          min: 0,
          max: 100,
          step: 1,
          range: true,
          value: [lowValue,highValue]
        })
        // Listener on the slider
        .on('change', function(e) {
          var lowPercent = round((e.value.newValue[0]/100)*100);
          var highPercent = round(100 - (e.value.newValue[1]/100)*100);
          var middlePercent = round(100 - (highPercent+lowPercent));
 
          // Load the answer inputs
          $(':text.form-control:eq(0)', thisQuestion).val(lowPercent).trigger('keyup');
          $(':text.form-control:eq(1)', thisQuestion).val(middlePercent).trigger('keyup');
          $(':text.form-control:eq(2)', thisQuestion).val(highPercent).trigger('keyup');
 
          handleTooltips();
        });
 
        // Insert some custom tooltips
        $('.slider-track > div', thisQuestion).append('<div class="inserted-tooltip hidden" />');
        handleTooltips();
      })
      .fail(function( jqxhr, settings, exception ) {
        console.log( exception );
    });
 
    // A function to handle the custom tooltips
    function handleTooltips() {
      $(':text.form-control', thisQuestion).each(function(i) {
        if($(this).val() != '') {
          $('.inserted-tooltip:eq('+i+')', thisQuestion).text($(this).val()+'%').removeClass('hidden');
        }
      });
    }
    });
</script>

<style type="text/css">
 
  .inserted-slider-wrapper .slider.slider-horizontal {
    width: 100%;
    margin: 40px 0 20px 0;
  }
 
  .inserted-slider-wrapper .slider-track,
  .inserted-slider-wrapper .slider-selection {
    box-shadow: none;
    background: transparent none;
  }
 
  .inserted-slider-wrapper .slider-track-low {
    background: red;
  }
 
  .inserted-slider-wrapper .slider-selection {
    background: orange;
  }
 
  .inserted-slider-wrapper .slider-track-high {
    background: green;
  }
 
  .inserted-slider-wrapper .inserted-tooltip {
    position: absolute;
    top: -40px;
    left: 50%;
    padding: 0 5px 2px 5px;
    border: 1px solid #ccc;
    border-radius: 4px; 
    transform: translateX(-50%);
  }
 
  .inserted-slider-wrapper .tooltip {
    display: none !important;
  }
</style>

/375771assets/packages/bootstrap/plugins/slider/bootstrap-slider.js?_=1610068553035:1375771?newtest=Y&lang=en:424 
bootstrap-slider.css:1 

// Path to the LS installation root
var rootPath = location.pathname.split('index.php')[0];

// Path to the LS installation root
var rootPath = 'https://yourDomaine/LimeSurvey/';