שינוי שדה מסוג מספר לשדה מסוג טווח (סליידר)

<script>
    function convertNumberToRange(min, max, step) {
  // Find the number input
  const numberInput = document.querySelector('input[type="number"][name="form_fields[number]"]');
  if (!numberInput) {
    console.error('Number input not found');
    return;
  }

  // Create a new range input
  const rangeInput = document.createElement('input');
  rangeInput.type = 'range';
  rangeInput.min = min;
  rangeInput.max = max;
  rangeInput.step = step;
  rangeInput.value = numberInput.value || min;
  rangeInput.className = numberInput.className;

  // Copy attributes from the number input
  ['name', 'id', 'required', 'aria-required'].forEach(attr => {
    if (numberInput.hasAttribute(attr)) {
      rangeInput.setAttribute(attr, numberInput.getAttribute(attr));
    }
  });

  // Create a label to display the current value
  const valueLabel = document.createElement('span');
  valueLabel.textContent = rangeInput.value;
  valueLabel.style.marginLeft = '10px';

  // Update functions
  const updateDisplay = () => {
    numberInput.value = rangeInput.value;
    valueLabel.textContent = rangeInput.value;
  };

  // Add event listeners
  rangeInput.addEventListener('input', updateDisplay);

  // Replace the number input with the range input in the DOM
  numberInput.parentNode.insertBefore(rangeInput, numberInput);
  numberInput.parentNode.insertBefore(valueLabel, rangeInput.nextSibling);
  numberInput.style.display = 'none';

  // Initial update
  updateDisplay();
}

// Usage
document.addEventListener('DOMContentLoaded', function() {
  convertNumberToRange(1, 5, 1);
});
</script>