gotem_content_moderation-1.1.6-alpha1/js/range-slider.js

console.log('rangeSlider.js loaded');
(function ($, Drupal) {
  Drupal.behaviors.rangeSlider = {
    attach: function (context, settings) {
      // Log to ensure the behavior is being attached.
      console.log('rangeSlider attached');

      // Target all number fields with a specific class or attribute (e.g., data-step for decimals)
      $('input[type="number"][step="0.01"]').once('rangeSlider').each(function () {
        var $input = $(this);
        
        // Create a range input element
        var $rangeInput = $('<input>', {
          type: 'range',
          min: $input.attr('min') || 0,  // Default to 0 if no min is set
          max: $input.attr('max') || 100, // Default to 100 if no max is set
          step: $input.attr('step') || 0.01, // Use the same step as the number field
          value: $input.val(), // Use the current value of the number input
          class: 'range-slider'
        });

        // Insert the range input before the number input
        $rangeInput.insertBefore($input);

        // Update the number input when the range slider changes
        $rangeInput.on('input change', function () {
          $input.val($rangeInput.val());
        });

        // Update the range slider when the number input changes
        $input.on('input change', function () {
          $rangeInput.val($input.val());
        });

        // Hide the original number input (if desired)
        $input.hide();
      });
    }
  };
})(jQuery, Drupal);