VctorIAN

<template>
  <input type="range" v-bind:min="litersMin" v-bind:max="litersMax" v-model="liters" />
</template>

<script>
export default {
  data() {
    return {
      liters: 0,
      litersMin: 0,
      litersMax: 100
    }
  }
}
</script>

Обычно если надо картинку высотой по тексту то делаю с помощью absolute. Какой-никакой width видимо всегда нужен.
svg соблюдает соотношение сторон, но можно это избежать задав аттрибут preserveAspectRatio="none"
Вот кстати ссылка любопытная, сам не читал, но вроде дело говорят