improvements-2.x-dev/modules/improvements_form/assets/improvements.range-slider.js
modules/improvements_form/assets/improvements.range-slider.js
(function ($, Drupal) { Drupal.behaviors.improvementsRangeSlider = { attach: function (context, settings) { if (context.tagName == 'SCRIPT') { return; } // Init jQuery UI Slider widget context.querySelectorAll('.form-range-slider__slider:not(.ui-slider)').forEach(function (sliderElement) { var $sliderElement = $(sliderElement); var $sliderWrapper = $sliderElement.closest('.form-range-slider'); var $minInput = $sliderWrapper.find('.form-range-slider__min'); var $maxInput = $sliderWrapper.find('.form-range-slider__max'); var min = parseFloat($minInput.attr('min')); var max = parseFloat($minInput.attr('max')); var step = parseFloat($minInput.attr('step')); // Show default values in placeholder $minInput.attr('placeholder', $minInput.attr('min')); $maxInput.attr('placeholder', $maxInput.attr('max')); $sliderElement.slider({ range: true, min: min, max: max, step: step, // Default slider values values: [ $minInput.val() !== '' ? $minInput.val() : $minInput.attr('min'), $maxInput.val() !== '' ? $maxInput.val() : $maxInput.attr('max'), ], // Set inputs value on slider slide slide: function (event, ui) { var $input = (ui.handleIndex == 0) ? $minInput : $maxInput; $input.val(ui.value); }, // Trigger input "change" event after user stop sliding stop: function (event, ui) { var $input = (ui.handleIndex == 0) ? $minInput : $maxInput; $input.trigger('change'); $input.trigger('input'); }, }); // Change slider after inputs changed $minInput.on('input', function () { $sliderElement.slider('values', 0, this.value); }); $maxInput.on('input', function () { if (this.value === '') { $sliderElement.slider('values', 1, $maxInput.attr('max')); } else { $sliderElement.slider('values', 1, this.value); } }); }); } }; })(jQuery, Drupal);