CODEWITHSUNDEEP
javascriptvue.js
Falko
Falko

Reputation: 43

print range input into html in vue.js

I want to print the current input from a range input into a HTML element.

Normally I would use classic javascript like so:

<div>
    <input type="range" id="price" name="price" min="0" max="1150" v-onchange="updateTextInput(this.value)">
    <input type="text" id="priceInput" value="">
</div>

function updateTextInput(val) {
    document.getElementById('priceInput').value=val;
}

But in vue js this is supposed to be done differently. I get an error message "value not defined" when I do it like this. So how can I do this in vue?

greetings :)

Upvotes: 0

Views: 866

Answers (2)

painotpi
painotpi

Reputation: 6996

You can use the v-model directive to create two-way data bindings on form input, textarea, and select elements.

And you can then bind the same variable of your range input v-model to the value binding of your textbox.

var app = new Vue({
  el: "#app",
  data() {
    return {
      rangedata: 0
    }
  },
  methods: {
    updateTextInput() {
      console.log(this.rangedata);
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <input type="range" id="price" name="price" min="0" max="1150" v-model="rangedata" @change="updateTextInput(this.value)" />
  <input type="text" id="priceInput" :value="rangedata" />
</div>

Upvotes: 1

Kevin Yobeth
Kevin Yobeth

Reputation: 1017

You could just bind your input using v-model. By binding it to a data, it will create a 2 way binding. It will reflect the changes on {{ range }}

<template>
  <input
    v-model="range" type="range" id="price" name="price" min="0" max="1150"
  />
  <p>{{ range }}</p>
</template>

<script>
import { ref } from "vue";
export default {
  setup() {
    const range = ref(0);

    return { range };
  },
};
</script>

Upvotes: 1

Related Questions