Vue

by the94air

HTML

<div id="app">
  <input
    ref="input"
    class="w-full"
    type="range"
    min="0"
    max="100"
    step="0.01"
    value="30"
    @input="onInput($event)"
  />
  <div>
    <p>{{ width }}</p>
    <article :style="{ width: width + 'px' }"></article>
  </div>
</div>

CSS

body {
  padding: 2rem;
}

input {
  width: 100%;
}

p {
  display: block;
  margin-bottom: 1rem;
}

article {
  width: 100px;
  height: 3px;
  background: red;
}

Vue

new Vue({
  el: "#app",
  data: {
    value: 0,
    width: 0,
  },
  methods: {
  	onInput(e) {
    // var screenWidth = window.screen.width;
    this.width = this.$refs.input.offsetWidth / 16 * e.target.value;
    console.log(percentage);
    /* this.width = Math.floor((e.target.value / this.$refs.input.offsetWidth) * 100 * 2) */;
    console.log(this.width);
    this.$emit('input', e.target.value)
  }
  }
})