vue实现滑块slider(赋源码)

因为项目用到滑块，只要一处使用到看了第三方库觉得没必要引入导致项目太臃肿：
先上代码：

<template>
    <div class="slider" ref="mySlider">
        <div class="left-btn" :class="{active:myPosition.isBtn==2}"></div>
        <div class="propo"></div>
        <div class="propo-bg"></div>
        <div class="right-btn" :class="{active:myPosition.isBtn==1}"></div>
    </div>
</template>
<script type="text/javascript">
    export default {
        name: 'slider',
        props:{
            "valueFun":{
                type:Function,
                required: true,
            },
            "max":{
                type:Number,
                default:100
            },
            "min":{
                type:Number,
                default:0
            }
        },
        data(){
            return{
                myPosition:{
                    left:0,
                    right:0,
                    now:0,
                    isBtn:0,
                    propoWidth:0
                },
                myDefault:null
            }
        },
        methods:{

        },
        mounted(){
            //滑块
            let that = this
            let mySlider = this.$refs.mySlider
            let propo = mySlider.children[1]
            let rightBtn = mySlider.children[3]
            let leftBtn = mySlider.children[0]
            let myWidth = 0

            const elementLeft = (e) => { //计算x坐标