73 lines
1.7 KiB
Vue
73 lines
1.7 KiB
Vue
<template>
|
|
<VueSlider
|
|
v-bind="$attrs"
|
|
:value="value"
|
|
:min="min"
|
|
:max="max"
|
|
:interval="step"
|
|
:tooltip-formatter="formatter"
|
|
@change="onInput"
|
|
/>
|
|
</template>
|
|
<style lang="scss" scoped>
|
|
@import '/src/style/_variables';
|
|
@import '~vue-slider-component/theme/material.css';
|
|
|
|
.vue-slider {
|
|
cursor: pointer;
|
|
}
|
|
::v-deep .vue-slider-rail {
|
|
background-color: $secondary;
|
|
border-radius: 0;
|
|
}
|
|
::v-deep .vue-slider-process {
|
|
background-color: $primary;
|
|
border-radius: 0;
|
|
}
|
|
::v-deep .vue-slider-dot-handle {
|
|
background-color: $primary;
|
|
}
|
|
::v-deep .vue-slider-dot-handle::after {
|
|
background-color: rgba($primary, 0.32);
|
|
transform: translate(-50%, -50%) scale(1);
|
|
}
|
|
::v-deep .vue-slider-dot-handle:hover .vue-slider-dot-tooltip {
|
|
visibility: visible;
|
|
}
|
|
::v-deep .vue-slider-dot-tooltip-inner {
|
|
background-color: $primary;
|
|
border-color: $primary;
|
|
}
|
|
::v-deep .vue-slider-dot-tooltip-text {
|
|
width: 40px;
|
|
height: 40px;
|
|
}
|
|
</style>
|
|
<script lang="ts">
|
|
import Vue from 'vue'
|
|
import VueSlider from 'vue-slider-component'
|
|
|
|
export default Vue.extend({
|
|
components: {
|
|
VueSlider,
|
|
},
|
|
props: {
|
|
value: { type: Number, required: true },
|
|
min: { type: Number, required: true },
|
|
max: { type: Number, required: true },
|
|
step: { type: Number, required: true },
|
|
percent: { type: Boolean, default: false },
|
|
},
|
|
methods: {
|
|
onInput(value: number) {
|
|
this.$emit('input', value)
|
|
},
|
|
formatter(value: number) {
|
|
return this.percent
|
|
? `${Math.round(((value - this.min) * 100) / (this.max - this.min))}%`
|
|
: `${value}`
|
|
}
|
|
}
|
|
})
|
|
</script>
|