How to apply custom styles to the HTML element of input type range for different browsers?

I want to achieve this design, where I want different color on left and right of the thumb and also thumb should be like a hollow circle, after searching for the answer I figured out it's really straight forward for Firefox and IE but I am not able to do the same for Chrome and Edge.

::-moz-range-progress and ::-moz-range-track

and aslo IE has

::-ms-fill-lower and ::-ms-fill-upper

to apply different style on left and right side of the thumb. This is my code

<style>
  input[type=range] {
    width: 100%;
    margin: 3px 0;
    background-color: transparent;
    -webkit-appearance: none;
  }
  input[type=range]:focus {
    outline: none;
  }
  input[type=range]::-webkit-slider-runnable-track {
    background: #0075b0;
    border: 0;
    width: 100%;
    height: 6px;
    cursor: pointer;
    border-radius: 3px
  }
  input[type=range]::-webkit-slider-thumb {
    margin-top: -8px;
    width: 20px;
    height: 20px;
    background: #ffffff;
    border: 5px solid #0075b0;
    border-radius: 50%;
    cursor: pointer;
    -webkit-appearance: none;
  }
  input[type="range"]::-moz-range-thumb {
    width: 12px;
    height: 12px;
    background: #ffffff;
    border: 5px solid #0075b0;
    border-radius: 50%;
    cursor: pointer;
  }
  input[type=range]::-moz-range-track {
    background-color: #F4F4F4;
    border: 0;
    width: 100%;
    height: 6px;
    cursor: pointer;
    border-radius: 3px
  }
  input[type="range"]::-moz-range-progress {
    background-color: #0075b0; 
    height: 6px;
    border-radius: 3px
  }
  input[type="range"]::-ms-thumb {
    width: 16px;
    height: 16px;
    background: #ffffff;
    border: 3px solid #0075b0;
    border-radius: 50%;
    cursor: pointer;
    margin-top: 0px;
    /*Needed to keep the Edge thumb centred*/
  }
  input[type="range"]::-ms-track {
    background: transparent;
    border-color: transparent;
    border-width: 4px 0;
    color: transparent;
    width: 100%;
    height: 6px;
    cursor: pointer;
    border-radius: 3px
  }
  input[type="range"]::-ms-fill-lower {
    background-color: #0075b0;
    border: 0;
    border-radius: 3px
  }
  input[type="range"]::-ms-fill-upper {
    background-color: #F4F4F4;
    border: 0;
    border-radius: 3px
  }
  input[type="range"]:focus::-ms-fill-lower {
    background-color: #0075b0;
    border-radius: 3px
  }
  input[type="range"]:focus::-ms-fill-upper {
    background-color: #F4F4F4;
    border-radius: 3px
  }
  @supports (-ms-ime-align:auto) {
    input[type=range] {
      margin: 0;
    }
  }
</style>