.slider-container{
  width: 100%;
}

.slider{
  -webkit-appearance: none;
  width: 100%;
  height: 9px;
  background: linear-gradient(90deg, #523C50 100%, rgb(214,214,214) 100%);
  outline: none;
  opacity: 1;
  -webkit-transition: 0.2s;
  transition: opacity 0.2s;
  border-radius: 5px;
}

.slider:hover{
  opacity: 0.8;
}

.slider::-webkit-slider-thumb{
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  background: #523C50;
  border-radius: 50%;
  cursor: pointer; 
}

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