Untitled

<template>
  <div
    class="form__control form__input--slider"
    :class="{ 'form__input--slider__electricity': type === 'electricity' }"
  >
    <!-- ... (rest of the template is unchanged) ... -->
  </div>
</template>

<script>
import { ref, watch, onMounted, toRefs } from 'vue';
import VueSlider from 'vue-slider-component';
import 'vue-slider-component/theme/default.css';

const GAS_MARKS = {
  // ... (unchanged)
};

const ENERGY_MARKS = {
  // ... (unchanged)
};

export default {
  components: {
    VueSlider
  },
  props: {
    // ... (unchanged props definitions) ...
  },
  setup(props, { emit }) {
    const { consumption, defaultValue, fieldName, type, gasFactor, showHouseIcons } = toRefs(props);

    const value = ref(defaultValue.value || 20);
    const factor = ref(gasFactor.value || 150);
    const gasLabelValue = ref('0m²');

    const options = ref({
      // ... (initial options definition, unchanged) ...
      marks: type.value === 'gas' ? { ...GAS_MARKS } : { ...ENERGY_MARKS }
    });

    const setSlider = newVal => {
      let val = 0;
      const slider = sliderRef.value;
      const marks = slider.marks;

      // ... (rest of the setSlider code, unchanged) ...
    };

    const setGasLabel = val => {
      const calculatedValue = Math.floor(parseInt(val) / factor.value);
      gasLabelValue.value = `${isNaN(calculatedValue) ? 0 : calculatedValue}m²`;
    };

    const sendConsumption = val => {
      // ... (rest of the sendConsumption code, unchanged) ...
    };

    const getSliderMarks = type => {
      // ... (unchanged)
    };

    const initSlider = type => {
      Array.from(document.getElementsByClassName('vue-slider-mark-label')).forEach(
        element => {
          element.innerHTML = '';
        }
      );

      setSlider(consumption.value);

      if (type === 'gas') {
        setGasLabel(consumption.value);
      }
    };

    const sliderRef = ref(null);

    watch(consumption, (newVal) => {
      // ... (rest of the consumption watcher code, unchanged) ...
    });

    watch(type, newVal => {
      getSliderMarks(newVal);
      nextTick(() => {
        initSlider(newVal);
      });
    });

    onMounted(() => {
      initSlider(type.value);
    });

    return {
      options,
      value,
      gasLabelValue,
      sendConsumption,
      showHouseIcons,
      sliderRef
    };
  }
};

</script>

<style src="./style/consumptionSlider.less" lang="less"></style>