<template>
  <div class="int-slider">
    <div class="slider-header">
      <span class="slider-label">{{ label }}</span>
    </div>
    <div class="slider-content">
      <el-slider 
        v-model="sliderValue" 
        :min="parseInt(min)" 
        :max="parseInt(max)"
        @input="handleInput"
      ></el-slider>
      <div class="slider-append">
        <slot name="append"></slot>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'IntSlider',
  props: {
    label: {
      type: String,
      default: ''
    },
    value: {
      type: [Number, String],
      default: 0
    },
    min: {
      type: [Number, String],
      default: 0
    },
    max: {
      type: [Number, String],
      default: 100
    }
  },
  data() {
    return {
      sliderValue: parseFloat(this.value)
    }
  },
  methods: {
    handleInput(value) {
      this.$emit('input', value);
    }
  },
  watch: {
    value(val) {
      this.sliderValue = parseFloat(val);
    }
  }
}
</script>

<style scoped>
.int-slider {
  margin-bottom: 15px;
}

.slider-header {
  margin-bottom: 8px;
}

.slider-label {
  font-weight: bold;
  font-size: 14px;
}

.slider-content {
  display: flex;
  align-items: center;
}

.slider-append {
  margin-left: 15px;
  min-width: 40px;
  text-align: center;
}
</style> 