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