.range {
    display: flex;
    width: 600px;
    margin-left: 30px;
    margin-bottom: 10px;
  }
.range__slider {
    width: 45%;
  }
  
  .range__value {
    width: 35%;
    margin-left: 45px;    
    text-align: center;
    border-left: #e6e4e4 1px solid;
  }
  
  .form-group {
    display: flex;
    flex-direction: column; 
    justify-content: center;
  }
  
  .form-group label {
    text-transform: uppercase;
    font-size: .7rem;
    color: #222;
    margin-bottom: 5px;
  }
  
  .form-group span {
    font-size: 20px;
    font-weight: 600;
    color: #3c3b3b;
  }
  
  .range__slider label {
    margin-bottom: 10px;
  }
  
  .range__slider [type="range"] {
    width: 100%;
    -webkit-appearance: none;
    height: 2px;
    border-radius: 6px;
    background: #f1f1f1;
    outline: none;
    padding: 0;
    margin: 0;
  }
  
  /* custom thumb */
  .range__slider [type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: var(--main);
    border: #c9daff 5px solid;
    cursor: pointer;
    -webkit-transition: background .15s ease-in-out;
    transition: background .15s ease-in-out;
  }
  
  .range__slider [type="range"]::-webkit-slider-thumb:hover {
    background: #4e6eb4;
  }
  
  .range__slider [type="range"]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border: 0;
    border-radius: 50%;
    background: #f0932b;
    border: #f9ca24 5px solid; cursor: pointer;
    -webkit-transition: background .15s ease-in-out;
    transition: background .15s ease-in-out;
  }
  
  .range__slider [type="range"]::-moz-range-thumb:hover {
    background: #f9ca24;
  }
  
  /* remove border */
  input::-moz-focus-inner, input::-moz-focus-outer {
    border: 0;
  }