Vue 3 multiple values in range slider

April 15, 2023

I have a range slider with 3 steps, each step is supposed to give me a different image resolution; ie 512×512 or 1024×1024.

I’ve set up the slider but I’m unable to figure out how to get the width and height values that I’ve set up in the data()

data() {
    return {
        resolution: [
            {id: 1, width: 512, height: 512},
            {id: 2, width: 816, height: 816},
            {id: 3, width: 1024, height: 1024},
      ]
    }
}

HTML

<input type="range" 
       class="form-range" 
       id="customRange1" 
       v-model="resolution" 
       min="1" max="3" step="1"
>
{{ resolution.width }}

>Solution :

Please take a look at following snippet:

const app = Vue.createApp({
  data() {
    return {
      resolution: [
        {id: 1, width: 512, height: 512},
        {id: 2, width: 816, height: 816},
        {id: 3, width: 1024, height: 1024},
      ],
      currentRes: 1
    };
  },
  computed: {
    currentResolution() {
      return this.resolution.find(r => r.id === +this.currentRes)
    }
  }
})
app.mount('#demo')

<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<div id="demo">
  <input type="range" 
       class="form-range" 
       id="customRange1" 
       v-model="currentRes"
       :min="1" :max="resolution.length" step="1"
  >
  {{ currentResolution.width }}
</div>