.slider {
  -webkit-appearance: none;
  width: 100%;
  margin: 8.35px 0;
}

.slider:focus {
  outline: none;
}

.slider::-webkit-slider-runnable-track {
  width: 100%;
  height: 13.3px;
  cursor: pointer;
  box-shadow: 1.4px 1.4px 1.7px #ffb2df, 0px 0px 1.4px #ffccea;
  background: #ffbae6;
  border-radius: 25px;
  border: 2.3px solid #dbd58f;
}

.slider::before::-webkit-slider-thumb {
}

.slider::-webkit-slider-thumb {
  border: 5px solid #ffcdff;
  height: 30px;
  width: 30px;
  border-radius: 12px;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -8px;
  background-size: 20px;
  background: #ffff7d
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='20px' width='20px'><text x='0' y='18' font-size='18'>🦄</text></svg>")
    no-repeat;
}

.slider:focus::-webkit-slider-thumb {
  box-shadow: 4.1px 4.1px 7.2px #27aaff, 0px 0px 4.1px #41b4ff;
}

.slider:focus::-webkit-slider-runnable-track {
  background: #ff91d8;
  box-shadow: 4.1px 4.1px 7.2px #27aaff, 0px 0px 4.1px #41b4ff;
}

.slider::-moz-range-track {
  content: '🦄';
  width: 100%;
  height: 13.3px;
  cursor: pointer;
  box-shadow: 1.4px 1.4px 1.7px #ffb2df, 0px 0px 1.4px #ffccea;
  background: #ffbae6;
  border-radius: 25px;
  border: 2.3px solid #dbd58f;
}

.slider::-moz-range-thumb {
  box-shadow: 4.1px 4.1px 7.2px #27aaff, 0px 0px 4.1px #41b4ff;
  border: 5px solid #ffcdff;
  height: 30px;
  width: 30px;
  border-radius: 12px;
  cursor: pointer;
  background: #ffff7d
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='20px' width='20px'><text x='0' y='18' font-size='18'>🦄</text></svg>")
    no-repeat;
}

.slider::-ms-track {
  width: 100%;
  height: 13.3px;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  color: transparent;
}

.slider::-ms-fill-lower {
  background: #ff68ca;
  border: 2.3px solid #dbd58f;
  border-radius: 50px;
  box-shadow: 1.4px 1.4px 1.7px #ffb2df, 0px 0px 1.4px #ffccea;
}

.slider::-ms-fill-upper {
  background: #ff91d8;
  border: 2.3px solid #dbd58f;
  border-radius: 50px;
  box-shadow: 1.4px 1.4px 1.7px #ffb2df, 0px 0px 1.4px #ffccea;
}

.slider::-ms-thumb {
  box-shadow: 4.1px 4.1px 7.2px #27aaff, 0px 0px 4.1px #41b4ff;
  border: 5px solid #ffcdff;
  width: 30px;
  border-radius: 12px;
  cursor: pointer;
  height: 13.3px;
  background: #ffff7d
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='20px' width='20px'><text x='0' y='18' font-size='18'>🦄</text></svg>")
    no-repeat;
}

.slider:focus::-ms-fill-lower {
  background: #ff91d8;
}

.slider:focus::-ms-fill-upper {
  background: #ffbae6;
}