test of polyfill rangeslider.js

by hrabinowitz

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/rangeslider.js/2.3.2/rangeslider.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/rangeslider.js/2.3.2/rangeslider.css">
<input
    type="range"
    min="1.0"                    // default 0
    max="100.0"                    // default 100
    value="50"                 // default min + (max-min)/2
    data-orientation="horizontal" // default horizontal
		id="myRange"
>
<br>
<input type="checkbox" name="usePoly">Use Polyfill

CSS

/* The slider itself 
#myRange {
    -webkit-appearance: none; 
    appearance: none;
    width: 600px; 
    height: 50px;
    background: #d3d3d3;
    outline: none; 
    opacity: 0.7; 
    -webkit-transition: .2s; 
    transition: opacity .2s;
}
*/

/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) * 
#myRange::-webkit-slider-thumb {
    -webkit-appearance: none; 
    appearance: none;
    width: 50px; 
    height: 25px; 
    background: orange;
		border: 1px solid blue;
    cursor: pointer; 
}
*/

#myRange + .rangeslider {
	width: 400px;	
	height: 50px;
}

.rangeslider__handle {
	background-image: none;
	border-radius: unset;
}

JavaScript

$('[name="usePoly"]').change(function onChange() {
	initPolyfill();
});

function initPolyfill() {
	$('input[type="range"]').rangeslider("destroy");
	$('input[type="range"]').rangeslider({
		polyfill: ! $('[name="usePoly"]').prop('checked'),	
	});

	$('.rangeslider__handle').css({'background-color': 'yellow',
		'width': '25%'
	});
}