<template>
  <div class="row">
    <label
      class="form-label col-9 col-sm-3 text-sm-end text-capitalize pr-1"
      :for="id"
    >
      <slot></slot>
    </label>
    <span class="col-3 col-sm-1 text-end"> {{ value }} </span>
    <div class="col">
      <input
        type="range"
        class="form-range"
        :id="id"
        @input="sliderCallback"
        :value="value"
      />
    </div>
  </div>
</template>

<script>
export default {
  name: "RangeSlider",
  props: {
    value: Number,
  },
  methods: {
    sliderCallback: function (event) {
      if (event.target.nodeName == "INPUT") {
        this.$emit("update:value", Number(event.target.value));
        console.log("s:" + this.value);
      }
    },
  },
  setup(props, { slots }) {
    const id = slots.default()[0].children + "-controlRange";
    return { id };
  },
};
</script>
