Multiple range slider

.range_container {
    display: flex;
    flex-direction: column;
    width: 100%;
  }
  
  .sliders_control {
    position: relative;
    min-height: 50px;
  }

  input[type=range]::-moz-range-thumb {
    -webkit-appearance: none;
    pointer-events: all;
    width: 20px;
    height: 20px;
    background-color: #43526E;
    border-radius: 50%;
    box-shadow: 0 0 0 1px #C6C6C6;
    cursor: pointer;  
  }

  .colorAndSizeAdjust::-moz-range-thumb{
    background-color: #C4795E !important;
  }

  .startSliderModel::-moz-range-thumb{
    width: 15px !important;
    height: 15px !important;
    border: 8px solid;
    background-color: white !important;
    border-color: #43526E;
  }


  input[type=range] {
    -webkit-appearance: none; 
    appearance: none;
    height: 5px;
    width: 100%;
    position: absolute;
    background-color: #C6C6C6;
    pointer-events: none;
  }

  #fromSlider {
    height: 0;
    z-index: 1;
  }

<div class="range_container">
        <div class="sliders_control"> 
            <input class="startSliderModel" id="fromSlider" type="range" value="0" min="0" max="40000"/>
            <input class="" id="lowestSlider" type="range" value="1500" min="0" max="40000"/>
            <input class="colorAndSizeAdjust" id="highestSlider" type="range" value="20000" min="0" max="40000"/>
            <input class="" id="toSlider" type="range" value="12620" min="0" max="40000"/>
        </div>
     </div>