Vue range是Vue中的一個組件，它可以讓用戶用兩個滑塊來選擇一個區間范圍。

要使用Vue range組件需要先在html中引入Vue和Vue range組件的js文件。

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script src="https://unpkg.com/vue-range-component/dist/vue-range-slider.min.js"></script>

在Vue的data中，需要設定一個range對象，它至少包含兩個屬性，一個是min代表最小值，一個是max代表最大值。

var vm=new Vue({
el:"#app",
data:{
range:{
min:0,
max:100
}
}
});

在html中，需要使用vue-range組件指令來綁定range對象。

<div id="app"><vue-range-slider v-model="range"></vue-range-slider></div>

在vue-range組件中，還有一些其他的屬性可以供用戶設置，比如step屬性代表每次滑動的跨度，或是left-color/right-color屬性控制滑塊的左右顏色，thumb-label屬性用來在滑塊上顯示當前值。另外，vue-range提供了一些事件，比如when-start-sliding事件表示開始滑動，when-done-sliding事件表示滑動完成。

<vue-range-slider 
v-model="range" 
:step="10" 
left-color="#f00" 
right-color="#0f0"
thumb-label
@when-start-sliding="onDragStart"
@when-done-sliding="onDragEnd"
></vue-range-slider>

最后，在Vue中，需要實現onDragStart和onDragEnd事件的函數。

var vm=new Vue({
el:"#app",
data:{
range:{
min:0,
max:100
}
},
methods:{
onDragStart:function(val){
console.log('開始拖動');
console.log(val);
},
onDragEnd:function(val){
console.log('完成拖動');
console.log(val);
}
}
});

總的來說，Vue range組件是一個非常實用的組件，它可以幫助用戶快速選擇一個區間范圍，并且易于使用和定制。通過在Vue中實現相關方法和事件，Vue range組件可以為開發者提供更多的操作空間和靈活性。