<template>
  <el-slider
    class="property-num-slider"
    :modelValue="value"
    @update:model-value="(val: any) => changeHandler(val)"
    @change="$emit('change')"
    size="small"
    height="200px"
    width="50px"
    style="cursor: pointer"
    :step="step || 0.1"
    :min="min"
    :max="max"
    show-input
  />
</template>

<script lang="ts" setup>
import { ElSlider } from "element-plus";

defineProps<{
  value: number;
  min?: number;
  max?: number;
  step?: number;
}>();
const emit = defineEmits<{
  (e: "update:value", val: number): void;
  (e: "change"): void;
}>();
const changeHandler = (val: number) => {
  emit("update:value", val);
};
</script>

<style lang="scss">
.property-num-slider {
  .el-input__wrapper {
    padding: 0 !important;
  }
  .el-slider__input {
    width: 50px;
  }
  .el-input-number__increase,
  .el-input-number__decrease {
    display: none;
  }
  .el-slider__runway.show-input {
    margin-right: 10px;
  }
}
</style>
