<input type="range" class="range-style">

*,
*::before,
*::after {
  box-sizing: border-box;
}

$primary: #e0e0e0;

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background: $primary;
}

input[type='range'] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  &:focus {
    outline: none;
  }
  &::-webkit-slider-thumb {
    -webkit-appearance: none;
  }
  &::-moz-range-thumb {
    border: none;
  }
}

.range-style {
  width: 400px;
  height: 60px;
  padding: 20px;
  background: $primary;
  border-radius: 10px;
  box-shadow: -2px -2px 8px white, 2px 2px 8px rgba(black, 0.5);

  @mixin track-style {
    display: flex;
    align-items: center;
    height: 20px;
    border-radius: 10px;
    box-shadow: inset -2px -2px 8px white, inset 2px 2px 8px rgba(black, 0.5);
  }

  @mixin thumb-style {
    position: relative;
    top: -50%;
    width: 40px;
    height: 40px;
    background-color: $primary;
    background-image: linear-gradient(-45deg, rgba(white, 0.8), transparent);
    border-radius: 50%;
    box-shadow: -1px -1px 2px white, 1px 1px 2px rgba(black, 0.3);
  }
  &::-webkit-slider-runnable-track {
    @include track-style;
  }
  &::-webkit-slider-thumb {
    @include thumb-style;
  }
  &::-moz-range-track {
    @include track-style;
  }
  &::-moz-range-thumb {
    @include thumb-style;
  }
}