Trying to display a value inside my custom range slider on Vue. I have successfully implemented the slider in vanilla JS within the 'mounted()' lifecycle hook, and although I can log the value from this hook, it does not render or update the data value.
New to Vue and thinking that maybe this needs to be done in the computed object, but unsure of how to go about it,
<template>
<div class="slidecontainer">
<input type="range" min="1" max="100" value="50" class="slider" id="slider" />
<div id="selector">
<div class="selector-thumb">
<p>{{rangeValue}}</p>
</div>
</div>
<div class="d-flex">
<div>
<p>R5 000</p>
<p>min</p>
</div>
<div style="margin-left:auto">
<p >R200 000</p>
<p >max</p>
</div>
</div>
</div>
</template>
<script>
export default {
data:function(){
return{
rangeValue:0
}
},
mounted(){
var slider = document.getElementById("slider");
var selector = document.getElementById("selector");
slider.oninput = function(){
selector.style.left = this.value + "%";
this.rangeValue = this.value;
console.log(this.rangeValue)
}
}
};
</script>