[fori]

Здравствуйте, я на 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 +
        "%"
      );
    },
  },

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