import Slider from 'bootstrap-slider' import camelCase from 'lodash/camelCase' import snakeCase from 'lodash/snakeCase' import throttle from 'lodash/throttle' import props from './properties' import watch from './watchers' // @vue/component export default { name: 'FormSlider', props, data() { return { slider: null, lastEvent: {} } }, watch, mounted() { const props = {} for (const key in this.$props) { if (this.$props.hasOwnProperty(key)) { const propskey = key === 'rangeHighlights' ? key : snakeCase(key) props[propskey] = this.$props[key] } } props.enabled = !this.disabled this.slider = new Slider(this.$refs.input, props) this.bindEvents() }, beforeDestroy() { if (this.slider) { this.slider.destroy() delete this.slider } }, methods: { refresh: throttle(function () { if (this.slider) { this.slider.refresh({ useCurrentValue: true }) this.bindEvents() } }, 10), bindEvents() { const events = ['slide', 'slide-start', 'slide-stop', 'change', 'slide-enabled', 'slide-disabled'] events.forEach((event) => { // only bind the event if the event is bound to us if (event === 'change' || this.$listeners[event]) { this.slider.on(camelCase(event), (value) => { if (this.debounce > 0) { const now = new Date().getTime() if (this.lastEvent[event] !== null && now <= this.lastEvent[event] + this.debounce) { return } this.lastEvent[event] = now } this.$emit(event, value) if (event === 'change') { this.$emit('input', value.newValue) } }) } }) } }, render(h) { return h('div', { staticClass: 'd-inline-block' }, [ h('input', { ref: 'input', attrs: { type: 'text' } }) ]) } }