<template>
	<div class="assembly-slider">
		<el-slider
			v-model="value"
			:min="min"
			:max="max"
			:step="step"
			placement="right"
			:format-tooltip="(n: number) => `${n}${unit}`"
			@change="onChange"
		/>
	</div>
</template>

<script lang="ts" name="assembly-slider" setup>
import { ref } from "vue";

const props = defineProps({
	modelValue: {
		type: Number,
		default: 0
	},
	min: Number,
	max: Number,
	step: Number,
	unit: {
		type: String,
		default: "rpx"
	}
});

const emit = defineEmits(["update:modelValue", "change"]);

const value = ref(props.modelValue);

function onChange() {
	emit("update:modelValue", value.value);
	emit("change", value.value);
}
</script>

<style lang="scss" scoped>
.assembly-slider {
	padding: 0 20px;
	box-sizing: border-box;
	.tips {
		font-size: 12px;
		color: #bfbfbf;
	}
}
</style>
