range-slider.js
27 lines
| 1 | export default class RangeSlider { |
| 2 | |
| 3 | constructor($element){ |
| 4 | this.$element = $element; |
| 5 | this.$slider = this.$element.find('.wpmtst-range__slider'); |
| 6 | this.$minInput = this.$element.find('.wpmtst-range__min'); |
| 7 | this.$maxInput = this.$element.find('.wpmtst-range__max'); |
| 8 | |
| 9 | this.initRangeSlider(); |
| 10 | } |
| 11 | |
| 12 | initRangeSlider() { |
| 13 | this.$slider.slider({ |
| 14 | range: true, |
| 15 | min: this.$slider.data('min'), |
| 16 | max: this.$slider.data('max'), |
| 17 | values: this.$slider.data('values').split(","), |
| 18 | slide: ( event, ui ) => { |
| 19 | this.$minInput.val( ui.values[ 0 ] ); |
| 20 | this.$maxInput.val( ui.values[ 1 ] ); |
| 21 | } |
| 22 | }); |
| 23 | } |
| 24 | } |
| 25 | |
| 26 | |
| 27 |