<div id="app">
  <div class="box" :style="boxStyle">
  
  </div>
  <input type="range" :min="0" :step="1" :max="100" v-model="value">
</div>
.box{
  height:100px;
  outline:1px solid;
}
new Vue({
  el:'#app',
  data(){
    return {
      value:50
    }
  },
  computed:{
    boxStyle(){
      return {
        background: `linear-gradient(90deg,red,${this.value}%,yellowgreen)`
      }
    }
  }
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js