style.css

@font-face {
    font-family: 'Roboto';
    src: url('font/roboto-regular-webfont.woff2') format('woff2'),
         url('font/roboto-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

html, body {
	margin: 0;
	padding: 0;
	font-family: -apple-system, BlinkMacSystemFont, "Roboto", "Oxygen",
	  "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
	  sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
  
.slider {
	-webkit-appearance: none;
	width: 100%;
	height: 10px;
	border-radius: 3px;  
	background: #444;
	outline: none;
	opacity: 0.7;
	-webkit-transition: .2s;
	transition: opacity .2s;
  }
  
.slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 20px;
	height: 20px;
	border-radius: 50%; 
	background: #ddd;
	cursor: pointer;
}

.slider::-moz-range-thumb {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #ddd;
	cursor: pointer;
}