export function createSliderControl({ label = "", value = 0, min = 0, max = 100, step = 1, onChange }) {
  const row = document.createElement("div");
  row.className = "slider-row";

  const lbl = document.createElement("label");
  lbl.textContent = label;
  lbl.className = "slider-label";

  const input = document.createElement("input");
  input.type = "range";
  input.className = "slider-input";
  input.min = min;
  input.max = max;
  input.step = step;
  input.value = value;

  const updateFill = () => {
    const percent = ((input.value - input.min) / (input.max - input.min)) * 100;
    input.style.setProperty("--slider-percent", `${percent}%`);
  };

  input.addEventListener("input", () => {
    updateFill();
    const v = Number(input.value);
    onChange?.(v);
  });

  updateFill();

  row.appendChild(lbl);
  row.appendChild(input);
  return row;
}
