<template>
  <div
    :class="{'h-full': vertical}"
    class="vc-range-slider"
  >
    <!--    <vue-slider-->
    <!--      v-bind="$attrs"-->
    <!--      :tooltip="tooltip"-->
    <!--      :direction="!vertical ? 'ltr' : 'btt'"-->
    <!--      :style="vertical ? 'height: 100%' : ''"-->
    <!--    />-->
  </div>
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue'
// import VueSlider from 'vue-slider-component'

type NumberOrNumberString = PropType<string | number | undefined>

export default defineComponent({
  name: 'VcRangeSlider',
  // components: { VueSlider },
  props: {
    tooltip: {
      type: String,
      default: 'none'
    },
    value: {
      type: [Number, String] as NumberOrNumberString,
      default: 0
    },
    vertical: {
      type: Boolean,
      default: false
    }
  },
  emits: ['input'],
  computed: {
    model: {
      get () {
        return this.value
      },
      set (val: number | string) {
        this.$emit('input', val)
      }
    }
  }
})
</script>

<style lang="scss">
.vc-range-slider {
  $themeColor: var(--primary-actions);
  $bgColor: var(--inactive-elements);
  $dotShadowFocus: 0.5px 0.5px 2px 1px rgba(0, 0, 0, 0.32);

  height: inherit;

  // @import 'vue-slider-component/lib/theme/default.scss';
}
</style>
