slider w proportional handle using input type slider

by hrabinowitz

HTML

<h1>Custom Range Slider</h1>

<div class="slidecontainer">
  <p>Default range slider:</p>
  <input type="range" min="1" max="100" value="50" id="basicRange">
</div>
<div>
	Value of 1st slider is <span id="outputFirst"></span>
</div>
<div>  
  <p>Custom range slider:</p>
  <input type="range" min="1" max="100" value="50" class="slider" id="myRange">
</div>
<div>
	Value of 2nd slider is <span id="output"></span>
</div>

CSS

.slidecontainer {
    width: 100%; /* Width of the outside container */
}

#basicRange {
	width: 350px;
}

/* The slider itself */
.slider {
    -webkit-appearance: none;  /* Override default CSS styles */
    appearance: none;
    width: /*100%*/600px; /* Full-width */
    height: /*25px*/50px; /* Specified height */
    background: #d3d3d3; /* Grey background */
    outline: none; /* Remove outline */
    opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
    -webkit-transition: .2s; /* 0.2 seconds transition on hover */
    transition: opacity .2s;
}

/* Mouse-over effects */
.slider:hover {
    opacity: 1; /* Fully shown on mouse-over */
}

/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */ 
.slider::-webkit-slider-thumb {
    -webkit-appearance: none; /* Override default look */
    appearance: none;
    width: /*25px*/250px; /* Set a specific slider handle width */
    height: 25px; /* Slider handle height */
    background: #4CAF50; /* Green background */
    cursor: pointer; /* Cursor on hover */
}

.slider::-moz-range-thumb {
    width: /*25px*/250px; /* Set a specific slider handle width */
    height: 25px; /* Slider handle height */
    background: #ff0000; /* red */
    cursor: pointer; /* Cursor on hover */
}

/* for IE */
.slider::-ms-thumb {
	width: 250px;
	height: 25px;
	background: #00ff00;
	cursor: pointer;
}

JavaScript

function onSliderChange() {
	$('#output').text($('#myRange').val());
}

$('#myRange').on('change input', onSliderChange);
onSliderChange();

function onFirstSliderChange() {
	$('#outputFirst').text($('#basicRange').val());
}

$('#basicRange').on('change input', onFirstSliderChange);
onFirstSliderChange();