body {
    --light-grey: #bed0e8;
    --green: #3C8A72;
}
.range-slider {
    --_height: 5px;
    --_thumb-size: calc(var(--_height) * 4);
    position: relative;
    width: 100%;
    display: grid;
    margin-bottom: calc(var(--_thumb-size) * -1);
  
    .range-labels {
      display: flex;
      justify-content: space-between;
  
      padding-bottom: 10px;
      .range-label {
        display: inline-flex;
        font-size: 16px;
        color: var(--white);
        line-height: 1;
  
        &-start {
          align-self: flex-start;
        }
        &-end {
          align-self: flex-end;
        }
      }
    }
  
    .track-wrapper {
      position: relative;
      z-index: 1;
      height: 1px;
      margin-bottom: var(--_thumb-size);
      display: grid;
      align-items: center;
      margin: 0 calc(var(--_thumb-size) / 2);
  
      .track {
        position: absolute;
        z-index: 1;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        border-radius: 5px;
        background-color: var(--light-grey);
        height: 1px;
      }
  
      .range-between {
        position: absolute;
        z-index: 2;
        left: 0%;
        right: 0%;
        top: 0;
        bottom: 0;
        border-radius: 5px;
        background-color: var(--green);
        height: 1px;
      }
  
      .thumb {
        --_shadow-sizer: 2;
        --_shadow-size: calc(var(--_thumb-size) * var(--_shadow-sizer));
        --_shadow-color: var(--green);
        --_shadow-opacity: 0;
        position: absolute;
        z-index: 3;
        width: var(--_thumb-size);
        height: var(--_thumb-size);
        background-color: var(--green);
        border-radius: 50%;
        transition: box-shadow 0.3s ease-in-out;
        height: 24px;
        width: 24px;
  
        &::before {
          content: '';
          pointer-events: none;
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
          z-index: -1;
          background-color: var(--_shadow-color);
          width: var(--_shadow-size);
          height: var(--_shadow-size);
          border-radius: inherit;
          opacity: var(--_shadow-opacity);
        }
  
        &.left {
          left: 0%;
          transform: translate(calc(var(--_thumb-size) / -2), 0px);
        }
  
        &.right {
          right: 0%;
          transform: translate(calc(var(--_thumb-size) / 2), 0px);
        }
  
        &.hover {
          --_shadow-opacity: .2;
        }
  
        &.active {
          --_shadow-opacity: .4;
          --_shadow-sizer: 4;
        }
      }
    }
  
    input[type='range'] {
      position: absolute;
      pointer-events: none;
      -webkit-appearance: none;
      z-index: 2;
      height: var(--_height);
      width: 100%;
      opacity: 0;
      cursor: pointer;
      bottom: 0;
    }
  
    input[type='range']::-webkit-slider-thumb {
      pointer-events: all;
      width: var(--_thumb-size);
      height: var(--_thumb-size);
      border-radius: 0;
      border: 0 none;
      background-color: var(--green);
      -webkit-appearance: none;
    }
  
    input[type='range']::-moz-range-thumb {
      pointer-events: all;
      width: var(--_thumb-size);
      height: var(--_thumb-size);
      border-radius: 0;
      border: 0 none;
      background-color: var(--green);
      -webkit-appearance: none;
    }
  }