97 lines
2.3 KiB
Vue
97 lines
2.3 KiB
Vue
<template>
|
|
<div class="slider" :disabled="disabled"></div>
|
|
</template>
|
|
<script>
|
|
import noUiSlider from 'nouislider';
|
|
|
|
export default {
|
|
name: 'base-slider',
|
|
props: {
|
|
value: {
|
|
type: [String, Array, Number],
|
|
description: 'slider value'
|
|
},
|
|
disabled: {
|
|
type: Boolean,
|
|
default: false,
|
|
description: 'whether the slider is disabled'
|
|
},
|
|
start: {
|
|
type: [Number, Array],
|
|
default: 0,
|
|
description:
|
|
'[noUi Slider start](https://refreshless.com/nouislider/slider-options/#section-start)'
|
|
},
|
|
connect: {
|
|
type: [Boolean, Array],
|
|
default: () => [true, false],
|
|
description:
|
|
'[noUi Slider connect](https://refreshless.com/nouislider/slider-options/#section-connect)'
|
|
},
|
|
range: {
|
|
type: Object,
|
|
default: () => {
|
|
return {
|
|
min: 0,
|
|
max: 100
|
|
};
|
|
},
|
|
description:
|
|
'[noUi Slider range](https://refreshless.com/nouislider/slider-values/#section-range)'
|
|
},
|
|
options: {
|
|
type: Object,
|
|
default: () => {
|
|
return {};
|
|
},
|
|
description:
|
|
'[noUi Slider options](https://refreshless.com/nouislider/slider-options/)'
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
slider: null
|
|
};
|
|
},
|
|
methods: {
|
|
createSlider() {
|
|
noUiSlider.create(this.$el, {
|
|
start: this.value || this.start,
|
|
connect: Array.isArray(this.value) ? true : this.connect,
|
|
range: this.range,
|
|
...this.options
|
|
});
|
|
const slider = this.$el.noUiSlider;
|
|
slider.on('slide', () => {
|
|
let value = slider.get();
|
|
if (value !== this.value) {
|
|
this.$emit('input', value);
|
|
}
|
|
});
|
|
}
|
|
},
|
|
mounted() {
|
|
this.createSlider();
|
|
},
|
|
watch: {
|
|
value(newValue, oldValue) {
|
|
const slider = this.$el.noUiSlider;
|
|
const sliderValue = slider.get();
|
|
if (newValue !== oldValue && sliderValue !== newValue) {
|
|
if (Array.isArray(sliderValue) && Array.isArray(newValue)) {
|
|
if (
|
|
oldValue.length === newValue.length &&
|
|
oldValue.every((v, i) => v === newValue[i])
|
|
) {
|
|
slider.set(newValue);
|
|
}
|
|
} else {
|
|
slider.set(newValue);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
<style></style>
|