<template>
  <v-container class="temperature-slider">
    <v-slider
      type="range"
      min="15"
      max="80"
      :label="value + ' °C'"
      :inverse-label="true"
      v-model="value"
      :rules="validator"
      @change="valueChanged"
    />
  </v-container>
</template>

<script>
export default {
  props: {
    initialValue: Number,
    validator: Array,
  },
  emits: ["value-changed"],
  data() {
    return {
      value: this.initialValue,
    };
  },
  methods: {
    valueChanged() {
      this.$emit("value-changed", this.value);
    },
  },
};
</script>

<style scoped>
</style>