fieldNoUiSlider.vue

<template>
	<div class="slider" :disabled="disabled" :class="{ 'contain-pips': containPips, 'contain-tooltip': containTooltip }"></div>
</template>

<script>
import abstractField from "../abstractField";
import { isArray, defaults } from "lodash";

export default {
	name: "field-noUiSlider",
	mixins: [abstractField],

	data() {
		return {
			slider: null
		};
	},

	watch: {
		model: function() {
			if (window.noUiSlider && this.slider && this.slider.noUiSlider) {
				this.slider.noUiSlider.set(this.value);
			}
		}
	},

	computed: {
		containPips() {
			return typeof this.fieldOptions.pips !== "undefined";
		},
		containTooltip() {
			return typeof this.fieldOptions.tooltips !== "undefined";
		}
	},

	methods: {
		onChange(value) {
			if (isArray(value)) {
				// Array (range)
				this.value = [parseFloat(value[0]), parseFloat(value[1])];
			} else {
				// Single value
				this.value = parseFloat(value);
			}
		},
		formatValueToField(value) {
			if (this.slider !== null && typeof this.slider.noUiSlider !== "undefined") {
				this.slider.noUiSlider.set(value);
			}
		},
		formatValueToModel(val) {
			if (typeof this.slider.noUiSlider !== "undefined") {
				if (val instanceof Array) {
					return [Number(val[0]), Number(val[1])];
				} else {
					return Number(val);
				}
			}
		},
		getStartValue() {
			if (this.value != null) {
				return this.value;
			} else {
				if (typeof this.fieldOptions.double !== "undefined") {
					return [this.fieldOptions.min, this.fieldOptions.min];
				} else {
					return this.fieldOptions.min;
				}
			}
		}
	},

	mounted() {
		this.$nextTick(() => {
			if (window.noUiSlider) {
				this.slider = this.$el;
				window.noUiSlider.create(
					this.slider,
					defaults(this.fieldOptions || {}, {
						start: this.getStartValue(),
						range: {
							min: this.fieldOptions.min,
							max: this.fieldOptions.max
						}
					})
				);
				this.slider.noUiSlider.on("change", this.onChange.bind(this));
			} else {
				console.warn(
					"noUiSlider is missing. Please download from https://github.com/leongersen/noUiSlider and load the script and CSS in the HTML head section!"
				);
			}
		});
	},

	beforeDestroy() {
		if (this.slider) this.slider.noUiSlider.off("change");
	}
};
</script>

<style lang="scss">
.vue-form-generator .field-noUiSlider {
	.field-wrap {
		display: block;
	}
	.contain-pips {
		margin-bottom: 30px;
	}
	.contain-tooltip {
		margin-top: 30px;
	}
	.noUi-vertical {
		height: 200px;
		margin: 10px 0;
	}
}
</style>