.slider 
{
	-webkit-appearance: none;
	width: 100%;
	height: 15px;
	border-radius: 5px;   
	background: rgba(255, 255, 255, 0.5);
	outline: none;
	opacity: 0.7;
	-webkit-transition: .2s;
	transition: opacity .2s;
}

.slider::-ms-thumb {
  /* ... extra stuff, height, width etc. */
	-webkit-appearance: none;
	appearance: none;
	width: 25px;
	height: 25px;
	border-radius: 50%; 
	background: rgba(76, 175, 80);
	cursor: pointer;
}

.slider::-webkit-slider-thumb 
{
	-webkit-appearance: none;
	appearance: none;
	width: 25px;
	height: 25px;
	border-radius: 50%; 
	background: rgba(76, 175, 80);
	cursor: pointer;
}

.slider::-moz-range-thumb 
{
	width: 25px;
	height: 25px;
	border-radius: 50%;
	background: rgb(51, 51, 51);
	cursor: pointer;
}