1.slider {
2  -webkit-appearance: none;
3  width: 100%;
4  height: 10px;
5  border-radius: 5px;
6  background-color: #4158D0;
7  background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
8  outline: none;
9  opacity: 0.7;
10  -webkit-transition: .2s;
11  transition: opacity .2s;
12}
13
14.slider::-webkit-slider-thumb {
15  -webkit-appearance: none;
16  appearance: none;
17  width: 20px;
18  height: 20px;
19  border-radius: 50%;
20  background-color: #4c00ff;
21  background-image: linear-gradient(160deg, #4900f5 0%, #80D0C7 100%);
22  cursor: pointer;
23}
24
25.slider::-moz-range-thumb {
26  width: 20px;
27  height: 20px;
28  border-radius: 50%;
29  background-color: #0093E9;
30  background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);
31  cursor: pointer;
32}
33