Seeking assistance in creating a double range slider with two handles for the native HTML input=range and Vue.js.
Current progress: https://jsfiddle.net/
Javascript (Vue.js)
var vm = new Vue({
el: '#app',
data: {
minAngle: 10,
maxAngle: 30
},
computed: {
sliderMin: {
get: function() {
var val = this.minAngle;
return val;
},
set: function(val) {
if (val > this.maxAngle) {
val = this.maxAngle;
}
this.minAngle = val;
console.log("minAngle:" + this.minAngle + " maxAngle:" + this.maxAngle);
}
},
sliderMax: {
get: function() {
var val = this.maxAngle;
return val;
},
set: function(val) {
if (val < this.minAngle) {
val = this.minAngle;
}
this.maxAngle = val;
console.log("minAngle:" + this.minAngle + " maxAngle:" + this.maxAngle);
}
}
}
});
HTML
<div id="app">
<input type="range" min="0" max="180" step="1" v-model="sliderMin">
<input type="number" min="0" max="180" step="1" v-model="sliderMin">
<input type="range" min="0" max="180" step="1" v-model="sliderMax">
<input type="number" min="0" max="180" step="1" v-model="sliderMax">
</div>
Looking to restrict the range of the sliders to prevent values from going below the minimum. The goal is to have one slider on top of another using CSS, giving the illusion of a single slider with two handles. While aware of Vue components available for this, exploring the possibility without them.
Thank you in advance, Bogdan