Styling HTML5 Range slider Input CSS

Here have nice way to Styling HTML5 range slider input field with css. you can see the below demo for html5 slider

Demo

The HTML Markup

First we creating html structure for HTML5 slider. the html structure is as follows:

<input type="range" min="0" max="50" value="20" step="1" onchange="rangevalue.value=value" />
<output id="rangevalue"></output>

The CSS

We are done the html structure for html5 range slider. So let's start the write css for html5 slider input field, The css is as follows:

<style>
	input[type='range']  {
		-webkit-appearance: none ;
		width:200px;
	}
	input[type='range']::-webkit-slider-runnable-track {
		-webkit-appearance: none ;
		appearance: none ;
		border-radius: 5px;
		box-shadow: inset 1px 1px 1px rgba(000,000,000,0.10);
		background-color: #CCC;
		height: 8px;
		vertical-align:middle;
		border: none;
		cursor: pointer;
	}
	input[type='range']::-webkit-slider-thumb {
		-webkit-appearance: none;
		border-radius: 100%;
		background-color: #037cd5;
		box-shadow: inset 0 0 0 4px #CCC, inset 0 0 4px #CCC, inset 0 0 0 4px #CCC;
		height: 22px;
		width: 22px;
		vertical-align:middle;
		border: none;
		cursor: pointer;
		margin-top: -6px;
	}
	input[type='range']::-webkit-slider-thumb:hover { 
		background: #fdd921;
	}
	input[type='range']:active::-webkit-slider-thumb { 
		background: #fdd921; 
	}
	input[type='range']::-moz-range-track{
		-moz-appearance: none ;
		border-radius: 5px;
		box-shadow: inset 1px 1px 1px rgba(000,000,000,0.10);
		background-color: #CCC;
		height: 8px;
		vertical-align:middle;
		margin:0; padding:0;
		border: none;
		cursor: pointer; 
	}
	input[type='range']::-moz-range-thumb {
		-moz-appearance: none ;
		border-radius: 100%;
		background-color: #037cd5;
		box-shadow: inset 0 0 0 4px #CCC, inset 0 0 4px #CCC, inset 0 0 0 4px #CCC;
		height: 22px;
		width: 22px;
		vertical-align:middle;
		border: none;
		cursor: pointer;
		margin-top: -6px;
	}
	input[type='range']::-moz-range-thumb:hover { 
		background: #fdd921; 
	}
	input[type='range']:active::-moz-range-thumb { 
		background: #fdd921; 
	}
	input[type=range]::-ms-track {
		width: 100%;
		height: 8px;
		cursor: pointer;
		animate: 0.2s;
		background: transparent;
		border-color: transparent;
		border-width: 39px 0;
		color: transparent;
	}
	input[type=range]::-ms-fill-lower {
		background: #CCC;
		border: 0px solid #000101;
		border-radius: 50px;
		box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
	}
	input[type=range]::-ms-fill-upper {
		background: #CCC;
		border: 0px solid #000101;
		border-radius: 50px;
		box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
	}
	input[type=range]::-ms-thumb {
		box-shadow: inset 0 0 0 4px #CCC, inset 0 0 4px #CCC, inset 0 0 0 4px #CCC;
		border: 0px solid #000000;
		height: 22px;
		width: 22px;
		border-radius: 100%;
		background: #037cd5;
		cursor: pointer;
		margin-top: -2px;	
	}
</style>

I have tested the demo, it's working good in latest browser Of Firefox, Chrome, Safari, Opera etc...

Let's, you can try you self and download the source code from the below links.

Try Your Self Download