<template>
  <div class="cus-slider">
    <Slider :value="value" @change="(val) => $emit('update:value', val)" :tip-formatter="(val) => `${val}%`"/>
    <InputNumber :value="value" @change="(val) => $emit('update:value', val)" addon-after="%"/>
  </div>
</template>

<script setup lang="ts">
import { defineProps, defineEmits } from "vue";
import { Slider, InputNumber } from "ant-design-vue";

defineProps<{ value: number }>();
defineEmits(["update:value"]);
</script>

<style lang="less" scoped>
.cus-slider {
  display: flex;
  align-items: center;
  .ant-slider {
    flex: 1;
  }
  .ant-input-number-group-wrapper {
    flex: 12%;
    margin-left: 8px;
  }
}
</style>