江湖救急 ant design vue-------- Slider 滑动输入条

Question

<a-slider range :step="1" :max="50" :min="0" :default-value="[0, 25]"/>

姐妹们，如何获取它两端的值，像上图一样在后边展示出来

Answer 1

<template>
    <div class="content">
        <a-slider range :default-value="[w1, w2]" @change="value" />
        {{w1+'K'}}-{{w2+'K'}}
    </div>
</template>
<script>
export default {
    data () {
        return {
            w1: 20,
            w2: 50
        };
    },
    methods: {
        value (changevalue) {
            //每次拖动时都会触发事件，获取两个数值
            console.log(changevalue);
            this.w1 = changevalue[0];
            this.w2 = changevalue[1];
        }
    },
};
</script>
<style scoped>
</style>

a-slider有change事件，可以获取滑动的值，是一个有两个数字的数组，数字范围0-100，分别赋给两个变量即可