Ползунок в 2 цвета

    input[type=range] {
      -webkit-appearance: none;
      margin: 10px 0;
      width: 100%;
    }
     
    input[type=range]::-webkit-slider-runnable-track {
      width: 100%;
      height: 12px;
      cursor: pointer;
      box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
      background: #000;
      border-radius: 25px;
      border: 0px;
    }
    input[type=range]::-webkit-slider-thumb {
      aspect-ratio: 1;
      height: 200%;
      background: #fff;
      cursor: pointer;
      border-radius: 50%;
      border: 1px solid #000;
      -webkit-appearance: none;
      transform: translateY(-25%);
    }
    body {padding: 30px}

<input type="range" style="width:100%;">