Javascript-форум - input type="range" и его стилизация

Здравствуйте, я на Vue 3 както задался целью создать идеальный range (для любых диапазонов) - наделал такой

<div class="wrapper">
        <input
          type="range"
          v-model="liters"
          :max="computedLitersMax"
          :min="computedLitersMin"
        />
      </div>

Код:

.wrapper {

      width: 100%;



      $heigth: 1vmin;

      $thumb-side: 0.2 * $heigth;

      input {

        width: 100%;

        display: block;

        margin: 0;



        @if $thumb-side > $heigth {

          margin-top: ($thumb-side - $heigth) / 2;

          margin-bottom: ($thumb-side - $heigth) / 2;

        }



        appearance: none;

        outline: none;

        height: $heigth;

        border-radius: $heigth / 2;

        background: linear-gradient(

          to right,

          red v-bind(litersRange),

          rgba(87, 87, 87, 0.46) v-bind(litersRange)

        );



        @mixin thumb {

          cursor: pointer;

          appearance: none;

          width: $thumb-side;

          height: $thumb-side;

          background: white;

          border-radius: 50%;

        }



        &::-webkit-slider-thumb {

          @include thumb();

        }

        &::-moz-range-thumb {

          @include thumb();

        }

        &::-ms-thumb {

          @include thumb();

        }

      }

    }

data() {
    return {

      liters: 0,
      litersMin: -10,
      litersMax: 10,

    };
  },
computed: {
    computedLitersMin() {
      return this.litersMin;
    },
    computedLitersMax() {
      return this.litersMax;
    },
    litersRange() {
      return (
        ((this.liters - this.litersMin) / (this.litersMax - this.litersMin)) *
          100 +
        "%"
      );
    },
  },

Но как оказалось что красная полосочка не вовсем в центре кружка - почему так приисходит, перфекционизм не дает мне покоя...