nouislider

HTML

<link rel="stylesheet" href="https://refreshless.com/nouislider/source/distribute/jquery.nouislider.min.css">
<script src="https://refreshless.com/nouislider/source/distribute/jquery.nouislider.all.js"></script>
<link rel="stylesheet" href="https://refreshless.com/nouislider/source/distribute/jquery.nouislider.pips.min.css">
<a href="./?another_page=true">Click here to generate a previous history element</a>
<h2>10px</h2>
<div id="slider_1" class="slider"></div>

<h2>40px</h2>
<div id="slider_2" class="slider"></div>

<h2>60px</h2>
<div id="slider_3" class="slider"></div>

<h2>80px</h2>
<div id="slider_4" class="slider"></div>

<h2>100px</h2>
<div id="slider_5" class="slider"></div>

CSS

body { background-color: white; padding: 0px; margin: 0px }
.slider { width: 300px; margin-top: 30px; color:red } 
#slider_1 { margin-left: 10px }
#slider_2 { margin-left: 40px }
#slider_3 { margin-left: 60px }
#slider_4 { margin-left: 80px }
#slider_5 { margin-left: 100px }

JavaScript

$('head').append('<meta name="viewport" content="width=device-width, initial-scale=1" />');

$('.slider').noUiSlider({
    start: [0, 100], 
    range: {
        'min': [0],
        'max': [100]
    }
});