56 lines
1.3 KiB
Vue
56 lines
1.3 KiB
Vue
<template>
|
|
<div>
|
|
<div class="start">
|
|
<span class="value">{{ value.start }}</span>
|
|
<div class="slidercontainer">
|
|
<input type="range" min="0" max="4094" class="slider" v-model.number="value.start">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="end">
|
|
<span class="value">{{ value.end }}</span>
|
|
<div class="slidercontainer">
|
|
<input type="range" min="1" max="4095" class="slider" v-model.number="value.end">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: ['value'],
|
|
|
|
mounted: function()
|
|
{
|
|
this.oldValue = { start: this.value.start, end: this.value.end };
|
|
},
|
|
|
|
watch: {
|
|
value: {
|
|
handler: function(newValue)
|
|
{
|
|
if (newValue.start != this.oldValue.start)
|
|
{
|
|
if (newValue.start > newValue.end)
|
|
{
|
|
newValue.end = newValue.start + 1;
|
|
this.$emit('input', newValue);
|
|
}
|
|
}
|
|
else if (newValue.end != this.oldValue.end)
|
|
{
|
|
if (newValue.end < newValue.start)
|
|
{
|
|
newValue.start = newValue.end - 1;
|
|
this.$emit('input', newValue);
|
|
}
|
|
}
|
|
|
|
this.oldValue.start = newValue.start;
|
|
this.oldValue.end = newValue.end;
|
|
},
|
|
deep: true
|
|
}
|
|
}
|
|
}
|
|
</script> |