Range Input Based Scroll Progress Indicator - jQuery ProgRange

ProgRange is a jQuery reading progress indicator plugin to create a range input based progress bar representing the current scroll position as you scroll down or up the web page. Licensed under the GNU General Public License v3.0.

How to use it:

1. Load the latest jQuery library and jQuery ProgRange plugin's script before we close the body tag.

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" 
        integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
        crossorigin="anonymous"></script>
<script src="src/progrange.js"></script>

2. The JavaScript to detect the scroll event and auto update the progress bar on vertical page scrolling.

$progRange = progRange();

$(window).scroll(function (event) {
    var scroll = $(window).scrollTop();
    
    $progRange.val(scroll);
});

$( window ).resize(function(){
  var maxScrollTop = $("body").prop("scrollHeight") - document.body.clientHeight;
  $progRange.attr("max",maxScrollTop );
});

3. Position the progress bar whatever you like.

input#prog-range {
  width: 100%;
  position: fixed;
  top: 0px;
}

4. Override the default styles of the range input.

input[type=range] {
 -webkit-appearance: none;
 background: none;
}

input[type=range]::-webkit-slider-runnable-track {
 height: 5px;
 background: #ddd;
 border: none;
 border-radius: 3px;
}

input[type=range]::-ms-track {
 height: 5px;
 background: #ddd;
 border: none;
 border-radius: 3px;
}

input[type=range]::-moz-range-track {
 height: 5px;
 background: #ddd;
 border: none;
 border-radius: 3px;
}

input[type=range]::-webkit-slider-thumb {
 -webkit-appearance: none;
 border: none;
 height: 16px;
 width: 16px;
 border-radius: 50%;
 background: #555;
 margin-top: -5px;
 position: relative;
}

input[type=range]::-ms-thumb {
 -webkit-appearance: none;
 border: none;
 height: 16px;
 width: 16px;
 border-radius: 50%;
 background: #555;
 margin-top: -5px;
 position: relative;
}

input[type=range]::-moz-range-thumb {
 -webkit-appearance: none;
 border: none;
 height: 16px;
 width: 16px;
 border-radius: 50%;
 background: #555;
 margin-top: -5px;
 position: relative;
}

input[type=range]:focus { outline: none; }

input[type=range]:focus::-webkit-slider-thumb:after {
 position: absolute;
 top: -35px;
 left: 50%;
 -webkit-transform: translateX(-50%);
 transform: translateX(-50%);
 background: #eee;
 border-radius: 5px;
 color: #555;
 padding: 5px 10px;
 border: 2px solid #555;
}

input[type=range]:focus::-ms-thumb:after {
 position: absolute;
 top: -35px;
 left: 50%;
 transform: translateX(-50%);
 background: #eee;
 border-radius: 5px;
 color: #555;
 padding: 5px 10px;
 border: 2px solid #555;
}

input[type=range]:focus::-moz-range-thumb:after {
 position: absolute;
 top: -35px;
 left: 50%;
 transform: translateX(-50%);
 background: #eee;
 border-radius: 5px;
 color: #555;
 padding: 5px 10px;
 border: 2px solid #555;
}

input[type=range]:focus::-webkit-slider-runnable-track {
 background: #ccc;
}

input[type=range]:focus::-ms-track {
 background: #ccc;
}

input[type=range]:focus::-moz-range-track {
 background: #ccc;
}

---

This awesome jQuery plugin is developed by lebleut. For more Advanced Usages, please check the demo page or visit the official website.