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>
|