<template>
  <vue-slider
    v-model="range"
    :min="min"
    :max="max"
    :tooltip="tooltip"
    :height="sliderHeight"
    :tooltip-style="tooltipStyle"
    :process-style="processStyle"
    :slider-style="sliderStyle"
    :bg-style="bgStyle"
    :dot-size="dotSize"
    id="vue-slider"
    @callback="onChange"
  ></vue-slider>
</template>

<script>
export default {
  name: 'range-input',
  components: {
    VueSlider: () => import('vue-slider-component'),
  },
  props: {
    value: {
      type: [Number, Array, String, Object],
      required: true,
    },
    min: {
      type: Number,
      required: true,
    },
    max: {
      type: Number,
      required: true,
    },
    tooltip: {
      type: String,
      required: false,
      default: 'hover',
    },
    sliderHeight: {
      type: [Number, String],
      required: false,
      default: 8,
    },
    tooltipStyle: {
      type: [Object, Array],
      required: false,
      default: () => {
        return [
          {
            backgroundColor: "#452EFF",
            borderColor: "#452EFF"
          },
          {
            backgroundColor: "#452EFF",
            borderColor: "#452EFF"
          }
        ]
      }
    },
    processStyle: {
      type: [Object, Array],
      required: false,
      default: () => {
        return {
          backgroundColor: "#7C6CFE",
        }
      }
    },
    sliderStyle: {
      type: [Object, Array],
      required: false,
      default: () => {
        return {
          backgroundColor: "#452EFF",
        }
      }
    },
    bgStyle: {
      type: [Object, Array],
      required: false,
      default: () => {
        return {
          backgroundColor: "#E5E5E5",
        }
      }
    },
    dotSize: {
      type: Number,
      required: false,
      default: 20,
    },
  },
  data() {
    return {
      currentRange: '',
    }
  },
  computed: {
    range: {
      get () {
        return this.value;
      },
      set (val) {
        this.currentRange = val;
      }
    }
  },
  methods: {
    onChange() {
      this.$emit('input', this.currentRange);
    }
  }
}
</script>

