90 lines
1.6 KiB
Vue
90 lines
1.6 KiB
Vue
<template>
|
|
<div class="my-slider">
|
|
<div class="my-slider__tooltip" :style="style">
|
|
<div class="my-slider__tooltip-wrapper">
|
|
{{ slider }}
|
|
</div>
|
|
</div>
|
|
<el-slider
|
|
v-model="slider"
|
|
:format-tooltip="(value) => `${value}`"
|
|
:show-tooltip="false"
|
|
:min="min"
|
|
:max="max"
|
|
@input="input"
|
|
></el-slider>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "MySlider",
|
|
model: {
|
|
prop: "value",
|
|
event: "change",
|
|
},
|
|
props: {
|
|
value: {
|
|
type: Number,
|
|
default: 100,
|
|
},
|
|
min: {
|
|
type: Number,
|
|
default: 0,
|
|
},
|
|
max: {
|
|
type: Number,
|
|
default: 100,
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
slider: this.value,
|
|
};
|
|
},
|
|
watch: {
|
|
value(newValue) {
|
|
this.slider = newValue;
|
|
},
|
|
},
|
|
computed: {
|
|
style() {
|
|
const length = this.max - this.min,
|
|
progress = this.slider - this.min,
|
|
left = (progress / length) * 100;
|
|
return {
|
|
paddingLeft: `${left}%`,
|
|
};
|
|
},
|
|
},
|
|
methods: {
|
|
input(value) {
|
|
this.$emit("change", value);
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.my-slider {
|
|
position: relative;
|
|
.my-slider__tooltip {
|
|
position: absolute;
|
|
top: 6px;
|
|
z-index: 999;
|
|
text-align: left;
|
|
.my-slider__tooltip-wrapper {
|
|
width: 7.5vw;
|
|
height: 3.6vw;
|
|
font-size: 0.6rem;
|
|
color: #2bcced;
|
|
text-align: center;
|
|
background: url("../../../assets/market/filter-left/tips.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
transform: translateX(-50%);
|
|
top: -50%;
|
|
}
|
|
}
|
|
}
|
|
</style>
|