MinecraftElectricalAge/src/main/web/WebClient/css/prettify.css

.btnSlider {
    font-size: 					14px;
    margin: 					0 5px;
}

.btnSlider ~ label:before {
    content: 					var(--val);
    position: 					relative;
    width: 						100%;
}

input[type='range'] {
    -webkit-appearance: 		none;
    --val: 						0;
    --pos: 						calc(1em + .01*var(--val)*(100% - 2em));
    margin: 					0;
    width: 						100px;

    background: 				linear-gradient(top, rgba(138,138,138,1) 0%, rgba(140,140,140,1) 14%, rgba(159,159,159,1) 72%, rgba(164,164,164,1) 100%) /*none*/;
    cursor: 					pointer;
}

input[type='range']::-webkit-slider-runnable-track, input[type='range']::-webkit-slider-thumb, input[type='range'] {
    -webkit-appearance: 		none;
}

input[type='range']::-webkit-slider-runnable-track {
    border: 					none;
    display: 					inline-block;
    margin-bottom: 				-4px;
    position: 					relative;
    border-radius: 				14px;
    height:						30px;

	
    background: 				#a5a5a5;
	-webkit-background-clip: 	padding-box;
    -webkit-background-origin:	padding-box;
/*    -webkit-background-image: 	-webkit-linear-gradient(top, rgba(138,138,138,1) 0%, rgba(140,140,140,1) 14%, rgba(159,159,159,1) 72%, rgba(164,164,164,1) 100%);*/
	background: 				linear-gradient(top, rgb(138,138,138) 0%, rgb(140,140,140) 14%, rgb(159,159,159) 72%, rgb(164,164,164) 100%);
    box-shadow: 				inset 0 5px 10px 0 rgba(0, 0, 0, 0.2), inset 0 -2px 5px 0 rgba(255, 255, 255, 0.2);

    -webkit-box-reflect: 		below 0 -webkit-gradient(linear, left top, left bottom, color-stop(0.5, transparent), to(rgba(255, 255, 255, 0.3)));
    -webkit-transition: 		all 0.5s ease-in;
    transition: 				all 0.5s ease-in;
    cursor: 					pointer;
}


.js input[type='range']::-webkit-slider-runnable-track {
    background-image: 			-webkit-linear-gradient(#8DAD33, #BDDD36);
    background-repeat: 			no-repeat;
    background-size: 			var(--pos);
}

input[type='range']::-webkit-slider-thumb {
    -webkit-box-sizing: 		border-box;

    border: 					solid 0.5em transparent;
    padding: 					0;
    margin: 					0;
    width: 						32px;
    height: 					32px;
    border-radius: 				50%;
    box-shadow: 				0 2px 5px rgba(0, 0, 0, 0.35), 0 0 1px 1px #a0a0a0, inset 0 1px 2px #b0b0b0;
/*	box-shadow: inset 0 -3px 3px 0 rgba(0, 0, 0, 0.1), inset 0 -1px 1px 0 rgba(255, 255, 255, 0.4), 0 2px 0 0 rgba(0, 0, 0, 0.2);*/
    
    background: 				-webkit-linear-gradient(#f9f9f9, #e6e6e6) padding-box, 
    							radial-gradient(circle at 50% calc(50% + 1px), #fff calc(0.5em - 1px), rgba(255, 255, 255, 0) calc(0.5em + 2px)) border-box, 
    							-webkit-linear-gradient(#f9f9f9, #e6e6e6) border-box;

    cursor: 					ew-resize;
}

input[type='range']::-moz-range-track, input[type='range']::-moz-range-thumb, input[type='range'] {
    -moz-appearance: 			none;
}

input[type='range']::-moz-range-track {
    border: 					none;
    height: 					30px;
    display: 					inline-block;
    margin-bottom: 				-9px;
    position: 					relative;
    border-radius: 				14px;
    
    line-height: 				normal;
    font-style: 				normal;
    color: 						#fff;
    text-shadow: 				0 1px 1px rgba(0,0,0,0.1);
    font-weight: 				bold;
    
    -moz-background-clip: 		padding;
    background-clip: 			padding-box;
    background: 				#a4a4a4;
    background: 	 			-moz-linear-gradient(top, rgba(138,138,138,1) 0%, rgba(140,140,140,1) 14%, rgba(159,159,159,1) 72%, rgba(164,164,164,1) 100%);
    
    box-shadow: 				inset 0 2px 5px 0 rgba(0, 0, 0, 0.1), inset 0 -1px 0 0 rgba(0, 0, 0, 0.1);
    -moz-transition: 			all 0.5s ease-in;
    transition: 				all 0.5s ease-in;
    cursor: 					pointer;
}

.js input[type='range']::-moz-range-track {
    background-image: 			-moz-linear-gradient(#8DAD33, #BDDD36);
    background-image: 			linear-gradient(#8DAD33, #BDDD36);
    background-repeat: 			no-repeat;
    background-size: 			var(--pos);
}

input[type='range']::-moz-range-progress {
}

input[type='range']::-moz-range-thumb {
    -moz-box-sizing: 			border-box;
    border: 					solid 0.5em transparent;
    padding: 					0;
    margin: 					0;
    width: 						32px;
    height: 					32px;
    border-radius: 				50%;
    box-shadow:	 				0 2px 5px rgba(0, 0, 0, 0.35), 0 0 1px 1px #a0a0a0, inset 0 1px 2px #b0b0b0;
    background: 				-moz-linear-gradient(#f9f9f9, #e6e6e6) padding-box,
                				-moz-radial-gradient(circle at 50% calc(50% + 1px), #fff calc(0.5em - 1px), rgba(255, 255, 255, 0) calc(0.5em + 2px)) border-box,
								-moz-linear-gradient(#f9f9f9, #e6e6e6) border-box;
    cursor: 					ew-resize;
}

input[type='range']::-ms-track {
}

input[type='range']::-ms-fill-lower {
}
input[type='range']::-ms-thumb {
}