Function createSlider

src/platforms/wasm/compiler/modules/ui/ui_manager.ts:281–337

* Creates a slider (range) input UI element with live value display * @param {Object} element - Element configuration object * @param {string} element.name - Display name for the slider * @param {string} element.id - Unique identifier for the slider * @param {number} element.value - Current/defa

(element)

 * @returns {HTMLDivElement} Container div with label, value display, and slider
 */
function createSlider(element) {
  const controlDiv = document.createElement('div');
  controlDiv.className = 'ui-control slider-control';

  // Create the slider container with relative positioning
  const sliderContainer = document.createElement('div');
  sliderContainer.className = 'slider-container';

  // Create the slider input
  const slider = document.createElement('input');
  slider.type = 'range';
  slider.id = `slider-${element.id}`;
  slider.setAttribute('min', String(Number.parseFloat(String(element.min))));
  slider.setAttribute('max', String(Number.parseFloat(String(element.max))));
  slider.setAttribute('value', String(Number.parseFloat(String(element.value))));

  // Check if element.step exists and is not undefined/null
  if (element.step !== undefined && element.step !== null) {
    slider.setAttribute('step', String(Number.parseFloat(String(element.step))));
  } else {
    // Set a default step
    slider.step = 'any';
  }

  // Create the overlay label div
  const overlayDiv = document.createElement('div');
  overlayDiv.className = 'slider-label-overlay';

  const labelText = document.createElement('span');
  labelText.className = 'label-text';
  labelText.textContent = element.name;

  const valueDisplay = document.createElement('span');
  valueDisplay.className = 'slider-value';
  valueDisplay.textContent = Number(element.value).toFixed(3);

  overlayDiv.appendChild(labelText);
  overlayDiv.appendChild(valueDisplay);

  // Set initial value in next frame to ensure proper initialization
  setTimeout(() => {
    slider.setAttribute('value', String(Number.parseFloat(String(element.value))));
    valueDisplay.textContent = Number(slider.value).toFixed(3);
  }, 0);

  // Update value display when slider changes
  slider.addEventListener('input', () => {
    valueDisplay.textContent = Number(slider.value).toFixed(3);
  });

  // Add elements to container
  sliderContainer.appendChild(slider);
  sliderContainer.appendChild(overlayDiv);
  controlDiv.appendChild(sliderContainer);

  return controlDiv;
}