|
3 | 3 | </template>
|
4 | 4 |
|
5 | 5 | <script>
|
6 |
| -import abstractField from "./abstractField"; |
7 |
| -import { isArray, defaults } from "lodash"; |
| 6 | + import abstractField from "./abstractField"; |
| 7 | + import { isArray, defaults } from "lodash"; |
8 | 8 |
|
9 |
| -export default { |
10 |
| - mixins: [abstractField], |
| 9 | + export default { |
| 10 | + mixins: [abstractField], |
11 | 11 |
|
12 |
| - data() { |
13 |
| - return { |
14 |
| - slider: null |
15 |
| - }; |
16 |
| - }, |
| 12 | + data() { |
| 13 | + return { |
| 14 | + slider: null |
| 15 | + }; |
| 16 | + }, |
17 | 17 |
|
18 |
| - watch: { |
19 |
| - model: function() { |
20 |
| - if (window.noUiSlider && this.slider && this.slider.noUiSlider) { |
21 |
| - this.slider.noUiSlider.set(this.value); |
| 18 | + watch: { |
| 19 | + model: function() { |
| 20 | + if (window.noUiSlider && this.slider && this.slider.noUiSlider) { |
| 21 | + this.slider.noUiSlider.set(this.value); |
| 22 | + } |
22 | 23 | }
|
23 |
| - } |
24 |
| - }, |
| 24 | + }, |
| 25 | +
|
| 26 | + methods: { |
| 27 | + onChange(value) { |
| 28 | + if (isArray(value)) { |
| 29 | + // Array (range) |
| 30 | + this.value = [parseFloat(value[0]), parseFloat(value[1])]; |
| 31 | + } else { |
| 32 | + // Single value |
| 33 | + this.value = parseFloat(value); |
| 34 | + } |
| 35 | + } |
| 36 | + }, |
25 | 37 |
|
26 |
| - methods: { |
27 |
| - onChange(value) { |
28 |
| - if (isArray(value)) { |
29 |
| - // Array (range) |
30 |
| - this.value = [parseFloat(value[0]), parseFloat(value[1])]; |
| 38 | + ready() { |
| 39 | + if (window.noUiSlider) { |
| 40 | + this.slider = this.$el; |
| 41 | + window.noUiSlider.create(this.slider, defaults(this.schema.sliderOptions || {}, { |
| 42 | + start: this.value != null ? this.value : this.schema.min, |
| 43 | + range: { |
| 44 | + "min": this.schema.min, |
| 45 | + "max": this.schema.max |
| 46 | + } |
| 47 | + })); |
| 48 | + this.slider.noUiSlider.on("change", this.onChange.bind(this)); |
31 | 49 | } else {
|
32 |
| - // Single value |
33 |
| - this.value = parseFloat(value); |
| 50 | + console.warn("noUiSlider is missing. Please download from https://github.com/leongersen/noUiSlider and load the script and CSS in the HTML head section!"); |
34 | 51 | }
|
35 |
| - } |
36 |
| - }, |
| 52 | + }, |
37 | 53 |
|
38 |
| - ready() { |
39 |
| - if (window.noUiSlider) { |
40 |
| - this.slider = this.$el; |
41 |
| - window.noUiSlider.create(this.slider, defaults(this.schema.sliderOptions || {}, { |
42 |
| - start: this.value != null ? this.value : this.schema.min, |
43 |
| - range: { |
44 |
| - "min": this.schema.min, |
45 |
| - "max": this.schema.max |
46 |
| - } |
47 |
| - })); |
48 |
| - this.slider.noUiSlider.on("change", this.onChange.bind(this)); |
49 |
| - } else { |
50 |
| - console.warn("noUiSlider is missing. Please download from https://github.com/leongersen/noUiSlider and load the script and CSS in the HTML head section!"); |
| 54 | + beforeDestroy() { |
| 55 | + if (this.slider) |
| 56 | + this.slider.noUiSlider.off("change"); |
51 | 57 | }
|
52 |
| - } |
53 |
| -}; |
| 58 | + }; |
54 | 59 | </script>
|
55 | 60 |
|
56 | 61 | <style lang="sass">
|
|
0 commit comments