@ksteinstudio/game-controller 1.0.0 → 1.0.1

package/dist/index.d.mts

@@ -242,6 +242,15 @@ interface DpadRenderContext {
 declare function createDpadElement(context: DpadRenderContext): HTMLElement;
 declare function updateDpadElement(container: HTMLElement, element: DpadElement, canvasWidth: number, canvasHeight: number): void;
 
+interface SliderRenderContext {
+    element: SliderElement;
+    canvasWidth: number;
+    canvasHeight: number;
+    onSliderChange: (elementId: string, actionKey: string, value: number) => void;
+}
+declare function createSliderElement(context: SliderRenderContext): HTMLElement;
+declare function updateSliderElement(container: HTMLElement, element: SliderElement, canvasWidth: number, canvasHeight: number): void;
+
 interface RendererState {
     config: ControllerConfig | null;
     canvas: HTMLElement | null;
@@ -269,4 +278,4 @@ interface ControllerSDKInstance {
 }
 declare function createControllerSDK(options: ControllerSDKOptions): ControllerSDKInstance;
 
-export { type AlignmentGuide, type BaseElement, type ButtonElement, type ButtonRenderContext, type CanvasSettings, type ConfigLoadMessage, type ConfigUpdateMessage, type ControllerConfig, type ControllerElement, type ControllerMessage, type ControllerSDKInstance, type ControllerSDKOptions, type DpadElement, type DpadPressMessage, type DpadReleaseMessage, type DpadRenderContext, type ElementStyle, type IframeBridge, type InputEndMessage, type InputEvent, type InputStartMessage, type JoystickElement, type JoystickMoveMessage, type JoystickRenderContext, MessageType, type ParentBridge, type Position, type RendererReadyMessage, type SliderChangeMessage, type SliderElement, type SnapResult, type Vector2D, angleFromVector, applyDeadzone, applyDeadzoneToVector, calculateCanvasDimensions, clamp, clampPercentage, convertPercentagePositionToPixel, convertPixelPositionToPercentage, createButtonElement, createControllerSDK, createDpadElement, createIframeBridge, createJoystickElement, createParentBridge, destroyRenderer, distance, findAlignmentGuides, generateGridLines, initializeRenderer, normalizeVector, parseAspectRatio, percentageToPixel, pixelToPercentage, renderControllerFromConfig, snapPositionToGrid, snapToGrid, updateButtonElement, updateDpadElement, updateJoystickElement };
+export { type AlignmentGuide, type BaseElement, type ButtonElement, type ButtonRenderContext, type CanvasSettings, type ConfigLoadMessage, type ConfigUpdateMessage, type ControllerConfig, type ControllerElement, type ControllerMessage, type ControllerSDKInstance, type ControllerSDKOptions, type DpadElement, type DpadPressMessage, type DpadReleaseMessage, type DpadRenderContext, type ElementStyle, type IframeBridge, type InputEndMessage, type InputEvent, type InputStartMessage, type JoystickElement, type JoystickMoveMessage, type JoystickRenderContext, MessageType, type ParentBridge, type Position, type RendererReadyMessage, type SliderChangeMessage, type SliderElement, type SliderRenderContext, type SnapResult, type Vector2D, angleFromVector, applyDeadzone, applyDeadzoneToVector, calculateCanvasDimensions, clamp, clampPercentage, convertPercentagePositionToPixel, convertPixelPositionToPercentage, createButtonElement, createControllerSDK, createDpadElement, createIframeBridge, createJoystickElement, createParentBridge, createSliderElement, destroyRenderer, distance, findAlignmentGuides, generateGridLines, initializeRenderer, normalizeVector, parseAspectRatio, percentageToPixel, pixelToPercentage, renderControllerFromConfig, snapPositionToGrid, snapToGrid, updateButtonElement, updateDpadElement, updateJoystickElement, updateSliderElement };

package/dist/index.d.ts

@@ -242,6 +242,15 @@ interface DpadRenderContext {
 declare function createDpadElement(context: DpadRenderContext): HTMLElement;
 declare function updateDpadElement(container: HTMLElement, element: DpadElement, canvasWidth: number, canvasHeight: number): void;
 
+interface SliderRenderContext {
+    element: SliderElement;
+    canvasWidth: number;
+    canvasHeight: number;
+    onSliderChange: (elementId: string, actionKey: string, value: number) => void;
+}
+declare function createSliderElement(context: SliderRenderContext): HTMLElement;
+declare function updateSliderElement(container: HTMLElement, element: SliderElement, canvasWidth: number, canvasHeight: number): void;
+
 interface RendererState {
     config: ControllerConfig | null;
     canvas: HTMLElement | null;
@@ -269,4 +278,4 @@ interface ControllerSDKInstance {
 }
 declare function createControllerSDK(options: ControllerSDKOptions): ControllerSDKInstance;
 
-export { type AlignmentGuide, type BaseElement, type ButtonElement, type ButtonRenderContext, type CanvasSettings, type ConfigLoadMessage, type ConfigUpdateMessage, type ControllerConfig, type ControllerElement, type ControllerMessage, type ControllerSDKInstance, type ControllerSDKOptions, type DpadElement, type DpadPressMessage, type DpadReleaseMessage, type DpadRenderContext, type ElementStyle, type IframeBridge, type InputEndMessage, type InputEvent, type InputStartMessage, type JoystickElement, type JoystickMoveMessage, type JoystickRenderContext, MessageType, type ParentBridge, type Position, type RendererReadyMessage, type SliderChangeMessage, type SliderElement, type SnapResult, type Vector2D, angleFromVector, applyDeadzone, applyDeadzoneToVector, calculateCanvasDimensions, clamp, clampPercentage, convertPercentagePositionToPixel, convertPixelPositionToPercentage, createButtonElement, createControllerSDK, createDpadElement, createIframeBridge, createJoystickElement, createParentBridge, destroyRenderer, distance, findAlignmentGuides, generateGridLines, initializeRenderer, normalizeVector, parseAspectRatio, percentageToPixel, pixelToPercentage, renderControllerFromConfig, snapPositionToGrid, snapToGrid, updateButtonElement, updateDpadElement, updateJoystickElement };
+export { type AlignmentGuide, type BaseElement, type ButtonElement, type ButtonRenderContext, type CanvasSettings, type ConfigLoadMessage, type ConfigUpdateMessage, type ControllerConfig, type ControllerElement, type ControllerMessage, type ControllerSDKInstance, type ControllerSDKOptions, type DpadElement, type DpadPressMessage, type DpadReleaseMessage, type DpadRenderContext, type ElementStyle, type IframeBridge, type InputEndMessage, type InputEvent, type InputStartMessage, type JoystickElement, type JoystickMoveMessage, type JoystickRenderContext, MessageType, type ParentBridge, type Position, type RendererReadyMessage, type SliderChangeMessage, type SliderElement, type SliderRenderContext, type SnapResult, type Vector2D, angleFromVector, applyDeadzone, applyDeadzoneToVector, calculateCanvasDimensions, clamp, clampPercentage, convertPercentagePositionToPixel, convertPixelPositionToPercentage, createButtonElement, createControllerSDK, createDpadElement, createIframeBridge, createJoystickElement, createParentBridge, createSliderElement, destroyRenderer, distance, findAlignmentGuides, generateGridLines, initializeRenderer, normalizeVector, parseAspectRatio, percentageToPixel, pixelToPercentage, renderControllerFromConfig, snapPositionToGrid, snapToGrid, updateButtonElement, updateDpadElement, updateJoystickElement, updateSliderElement };

package/dist/index.js

@@ -35,6 +35,7 @@ __export(index_exports, {
   createIframeBridge: () => createIframeBridge,
   createJoystickElement: () => createJoystickElement,
   createParentBridge: () => createParentBridge,
+  createSliderElement: () => createSliderElement,
   destroyRenderer: () => destroyRenderer,
   distance: () => distance,
   findAlignmentGuides: () => findAlignmentGuides,
@@ -49,7 +50,8 @@ __export(index_exports, {
   snapToGrid: () => snapToGrid,
   updateButtonElement: () => updateButtonElement,
   updateDpadElement: () => updateDpadElement,
-  updateJoystickElement: () => updateJoystickElement
+  updateJoystickElement: () => updateJoystickElement,
+  updateSliderElement: () => updateSliderElement
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -196,10 +198,12 @@ function isInputEvent(message) {
 
 // src/math/coordinate-converter.ts
 function snapToGrid(value, gridDensity) {
+  if (gridDensity <= 0) return value;
   const step = 100 / gridDensity;
   return Math.round(value / step) * step;
 }
 function snapPositionToGrid(position, gridDensity) {
+  if (gridDensity <= 0) return position;
   return {
     x: snapToGrid(position.x, gridDensity),
     y: snapToGrid(position.y, gridDensity)
@@ -336,6 +340,7 @@ function findCenterSnap(element, position, threshold) {
   return { guides, snappedX, snappedY };
 }
 function generateGridLines(gridDensity) {
+  if (gridDensity <= 0) return [];
   const step = 100 / gridDensity;
   const lines = [];
   for (let i = 0; i <= gridDensity; i++) {
@@ -698,6 +703,113 @@ function updateDpadElement(container, element, canvasWidth, canvasHeight) {
   container.style.height = `${pixelSize}px`;
 }
 
+// src/renderer/slider-renderer.ts
+function createSliderElement(context) {
+  const { element, canvasWidth, canvasHeight, onSliderChange } = context;
+  const container = document.createElement("div");
+  container.dataset.elementId = element.id;
+  container.dataset.elementType = "slider";
+  const pixelX = percentageToPixel(element.position.x, canvasWidth);
+  const pixelY = percentageToPixel(element.position.y, canvasHeight);
+  const referenceDimension = Math.min(canvasWidth, canvasHeight);
+  const trackLength = percentageToPixel(element.length, referenceDimension);
+  const trackThickness = percentageToPixel(4, referenceDimension);
+  const isHorizontal = element.orientation === "horizontal";
+  const trackWidth = isHorizontal ? trackLength : trackThickness;
+  const trackHeight = isHorizontal ? trackThickness : trackLength;
+  applySliderTrackStyles(container, pixelX, pixelY, trackWidth, trackHeight, element);
+  const thumb = createThumbElement(isHorizontal, trackWidth, trackHeight, element);
+  container.appendChild(thumb);
+  attachSliderInteraction(container, thumb, element, isHorizontal, onSliderChange);
+  return container;
+}
+function applySliderTrackStyles(container, pixelX, pixelY, trackWidth, trackHeight, element) {
+  const halfW = trackWidth / 2;
+  const halfH = trackHeight / 2;
+  Object.assign(container.style, {
+    position: "absolute",
+    left: `${pixelX - halfW}px`,
+    top: `${pixelY - halfH}px`,
+    width: `${trackWidth}px`,
+    height: `${trackHeight}px`,
+    borderRadius: "8px",
+    backgroundColor: "rgba(255, 255, 255, 0.06)",
+    border: "1px solid rgba(255, 255, 255, 0.08)",
+    opacity: String(element.style?.opacity ?? 0.85),
+    zIndex: String(element.zIndex || 1),
+    touchAction: "none",
+    userSelect: "none",
+    boxSizing: "border-box"
+  });
+}
+function createThumbElement(isHorizontal, trackWidth, trackHeight, element) {
+  const thumb = document.createElement("div");
+  const thumbWidth = isHorizontal ? trackWidth * 0.2 : trackWidth * 0.7;
+  const thumbHeight = isHorizontal ? trackHeight * 0.7 : trackHeight * 0.2;
+  Object.assign(thumb.style, {
+    position: "absolute",
+    width: `${thumbWidth}px`,
+    height: `${thumbHeight}px`,
+    borderRadius: "6px",
+    backgroundColor: element.style?.color || "#555",
+    left: "50%",
+    top: "50%",
+    transform: "translate(-50%, -50%)",
+    pointerEvents: "none",
+    willChange: "left, top"
+  });
+  return thumb;
+}
+function attachSliderInteraction(container, thumb, element, isHorizontal, onSliderChange) {
+  const activePointers = /* @__PURE__ */ new Set();
+  container.addEventListener("pointerdown", (event) => {
+    event.preventDefault();
+    activePointers.add(event.pointerId);
+    container.setPointerCapture(event.pointerId);
+    updateThumbPosition(event, container, thumb, element, isHorizontal, onSliderChange);
+  });
+  container.addEventListener("pointermove", (event) => {
+    if (!activePointers.has(event.pointerId)) return;
+    event.preventDefault();
+    updateThumbPosition(event, container, thumb, element, isHorizontal, onSliderChange);
+  });
+  const releaseHandler = (event) => {
+    activePointers.delete(event.pointerId);
+  };
+  container.addEventListener("pointerup", releaseHandler);
+  container.addEventListener("pointercancel", releaseHandler);
+}
+function updateThumbPosition(event, container, thumb, element, isHorizontal, onSliderChange) {
+  const rect = container.getBoundingClientRect();
+  let value;
+  if (isHorizontal) {
+    value = (event.clientX - rect.left) / rect.width;
+    value = clamp(value, 0, 1);
+    thumb.style.left = `${value * 100}%`;
+  } else {
+    value = (event.clientY - rect.top) / rect.height;
+    value = clamp(value, 0, 1);
+    thumb.style.top = `${value * 100}%`;
+  }
+  onSliderChange(element.id, element.actionKey, parseFloat(value.toFixed(4)));
+}
+function updateSliderElement(container, element, canvasWidth, canvasHeight) {
+  const pixelX = percentageToPixel(element.position.x, canvasWidth);
+  const pixelY = percentageToPixel(element.position.y, canvasHeight);
+  const referenceDimension = Math.min(canvasWidth, canvasHeight);
+  const trackLength = percentageToPixel(element.length, referenceDimension);
+  const trackThickness = percentageToPixel(4, referenceDimension);
+  const isHorizontal = element.orientation === "horizontal";
+  const trackWidth = isHorizontal ? trackLength : trackThickness;
+  const trackHeight = isHorizontal ? trackThickness : trackLength;
+  const halfW = trackWidth / 2;
+  const halfH = trackHeight / 2;
+  container.style.left = `${pixelX - halfW}px`;
+  container.style.top = `${pixelY - halfH}px`;
+  container.style.width = `${trackWidth}px`;
+  container.style.height = `${trackHeight}px`;
+}
+
 // src/renderer/rendering-engine.ts
 function initializeRenderer(rootElement) {
   const bridge = createIframeBridge();
@@ -794,6 +906,13 @@ function createElementByType(state, element, canvasWidth, canvasHeight) {
         onDpadPress: (elementId, direction, actionKey) => state.bridge.emitDpadPress(elementId, direction, actionKey),
         onDpadRelease: (elementId, direction, actionKey) => state.bridge.emitDpadRelease(elementId, direction, actionKey)
       });
+    case "slider":
+      return createSliderElement({
+        element,
+        canvasWidth,
+        canvasHeight,
+        onSliderChange: (elementId, actionKey, value) => state.bridge.emitSliderChange(elementId, actionKey, value)
+      });
     default:
       return null;
   }
@@ -828,17 +947,24 @@ function createControllerSDK(options) {
   const iframe = createIframeElement(width, height);
   container.appendChild(iframe);
   let bridge = null;
-  iframe.addEventListener("load", () => {
-    bridge = createParentBridge(iframe);
-    if (onInput) {
-      bridge.onInput(onInput);
+  let configSent = false;
+  function sendConfigOnce() {
+    if (configSent || !bridge) return;
+    configSent = true;
+    bridge.sendConfig(config);
+    onReady?.();
+  }
+  bridge = createParentBridge(iframe);
+  if (onInput) {
+    bridge.onInput(onInput);
+  }
+  bridge.onMessage((message) => {
+    if (message.type === "RENDERER_READY" /* RENDERER_READY */) {
+      sendConfigOnce();
     }
-    bridge.onMessage((message) => {
-      if (message.type === "RENDERER_READY" /* RENDERER_READY */) {
-        bridge?.sendConfig(config);
-        onReady?.();
-      }
-    });
+  });
+  iframe.addEventListener("load", () => {
+    sendConfigOnce();
   });
   if (iframeSrc) {
     iframe.src = iframeSrc;
@@ -851,6 +977,7 @@ function createControllerSDK(options) {
     },
     destroy() {
       bridge?.destroy();
+      bridge = null;
       iframe.remove();
     },
     getIframe() {
@@ -1050,6 +1177,50 @@ function getEmbeddedRendererScript() {
       canvas.appendChild(container);
     }
 
+    function renderSlider(el, cw, ch, canvas) {
+      const ref = Math.min(cw, ch);
+      const trackLen = percentageToPixel(el.length, ref);
+      const trackThick = percentageToPixel(4, ref);
+      const px = percentageToPixel(el.position.x, cw);
+      const py = percentageToPixel(el.position.y, ch);
+      const isH = el.orientation === 'horizontal';
+      const tw = isH ? trackLen : trackThick;
+      const th = isH ? trackThick : trackLen;
+      const container = document.createElement('div');
+      container.dataset.elementId = el.id;
+      Object.assign(container.style, {
+        position:'absolute', left:(px-tw/2)+'px', top:(py-th/2)+'px',
+        width:tw+'px', height:th+'px', borderRadius:'8px',
+        backgroundColor:'rgba(255,255,255,0.06)', border:'1px solid rgba(255,255,255,0.08)',
+        opacity:String(el.style?.opacity??0.85), zIndex:String(el.zIndex||1),
+        touchAction:'none', userSelect:'none', boxSizing:'border-box'
+      });
+      const thumb = document.createElement('div');
+      const thumbW = isH ? tw*0.2 : tw*0.7;
+      const thumbH = isH ? th*0.7 : th*0.2;
+      Object.assign(thumb.style, {
+        position:'absolute', width:thumbW+'px', height:thumbH+'px',
+        borderRadius:'6px', backgroundColor:el.style?.color||'#555',
+        left:'50%', top:'50%', transform:'translate(-50%,-50%)',
+        pointerEvents:'none', willChange:'left, top'
+      });
+      container.appendChild(thumb);
+      const active = new Set();
+      container.addEventListener('pointerdown', e => { e.preventDefault(); active.add(e.pointerId); container.setPointerCapture(e.pointerId); updateThumb(e); });
+      container.addEventListener('pointermove', e => { if(!active.has(e.pointerId)) return; e.preventDefault(); updateThumb(e); });
+      container.addEventListener('pointerup', e => { active.delete(e.pointerId); });
+      container.addEventListener('pointercancel', e => { active.delete(e.pointerId); });
+      function updateThumb(e) {
+        const rect = container.getBoundingClientRect();
+        let val;
+        if(isH) { val = (e.clientX - rect.left) / rect.width; } else { val = (e.clientY - rect.top) / rect.height; }
+        val = clamp(val, 0, 1);
+        if(isH) thumb.style.left = (val*100)+'%'; else thumb.style.top = (val*100)+'%';
+        emitToParent({type:MessageType.SLIDER_CHANGE,payload:{elementId:el.id,actionKey:el.actionKey,value:parseFloat(val.toFixed(4)),timestamp:Date.now()}});
+      }
+      canvas.appendChild(container);
+    }
+
     function renderConfig(config) {
       const root = document.getElementById('controller-root');
       root.innerHTML = '';
@@ -1067,6 +1238,7 @@ function getEmbeddedRendererScript() {
         if(el.type==='button') renderButton(el, dims.width, dims.height, canvas);
         else if(el.type==='joystick') renderJoystick(el, dims.width, dims.height, canvas);
         else if(el.type==='dpad') renderDpad(el, dims.width, dims.height, canvas);
+        else if(el.type==='slider') renderSlider(el, dims.width, dims.height, canvas);
       }
     }
 
@@ -1098,6 +1270,7 @@ function getEmbeddedRendererScript() {
   createIframeBridge,
   createJoystickElement,
   createParentBridge,
+  createSliderElement,
   destroyRenderer,
   distance,
   findAlignmentGuides,
@@ -1112,5 +1285,6 @@ function getEmbeddedRendererScript() {
   snapToGrid,
   updateButtonElement,
   updateDpadElement,
-  updateJoystickElement
+  updateJoystickElement,
+  updateSliderElement
 });

package/dist/index.mjs

@@ -141,10 +141,12 @@ function isInputEvent(message) {
 
 // src/math/coordinate-converter.ts
 function snapToGrid(value, gridDensity) {
+  if (gridDensity <= 0) return value;
   const step = 100 / gridDensity;
   return Math.round(value / step) * step;
 }
 function snapPositionToGrid(position, gridDensity) {
+  if (gridDensity <= 0) return position;
   return {
     x: snapToGrid(position.x, gridDensity),
     y: snapToGrid(position.y, gridDensity)
@@ -281,6 +283,7 @@ function findCenterSnap(element, position, threshold) {
   return { guides, snappedX, snappedY };
 }
 function generateGridLines(gridDensity) {
+  if (gridDensity <= 0) return [];
   const step = 100 / gridDensity;
   const lines = [];
   for (let i = 0; i <= gridDensity; i++) {
@@ -643,6 +646,113 @@ function updateDpadElement(container, element, canvasWidth, canvasHeight) {
   container.style.height = `${pixelSize}px`;
 }
 
+// src/renderer/slider-renderer.ts
+function createSliderElement(context) {
+  const { element, canvasWidth, canvasHeight, onSliderChange } = context;
+  const container = document.createElement("div");
+  container.dataset.elementId = element.id;
+  container.dataset.elementType = "slider";
+  const pixelX = percentageToPixel(element.position.x, canvasWidth);
+  const pixelY = percentageToPixel(element.position.y, canvasHeight);
+  const referenceDimension = Math.min(canvasWidth, canvasHeight);
+  const trackLength = percentageToPixel(element.length, referenceDimension);
+  const trackThickness = percentageToPixel(4, referenceDimension);
+  const isHorizontal = element.orientation === "horizontal";
+  const trackWidth = isHorizontal ? trackLength : trackThickness;
+  const trackHeight = isHorizontal ? trackThickness : trackLength;
+  applySliderTrackStyles(container, pixelX, pixelY, trackWidth, trackHeight, element);
+  const thumb = createThumbElement(isHorizontal, trackWidth, trackHeight, element);
+  container.appendChild(thumb);
+  attachSliderInteraction(container, thumb, element, isHorizontal, onSliderChange);
+  return container;
+}
+function applySliderTrackStyles(container, pixelX, pixelY, trackWidth, trackHeight, element) {
+  const halfW = trackWidth / 2;
+  const halfH = trackHeight / 2;
+  Object.assign(container.style, {
+    position: "absolute",
+    left: `${pixelX - halfW}px`,
+    top: `${pixelY - halfH}px`,
+    width: `${trackWidth}px`,
+    height: `${trackHeight}px`,
+    borderRadius: "8px",
+    backgroundColor: "rgba(255, 255, 255, 0.06)",
+    border: "1px solid rgba(255, 255, 255, 0.08)",
+    opacity: String(element.style?.opacity ?? 0.85),
+    zIndex: String(element.zIndex || 1),
+    touchAction: "none",
+    userSelect: "none",
+    boxSizing: "border-box"
+  });
+}
+function createThumbElement(isHorizontal, trackWidth, trackHeight, element) {
+  const thumb = document.createElement("div");
+  const thumbWidth = isHorizontal ? trackWidth * 0.2 : trackWidth * 0.7;
+  const thumbHeight = isHorizontal ? trackHeight * 0.7 : trackHeight * 0.2;
+  Object.assign(thumb.style, {
+    position: "absolute",
+    width: `${thumbWidth}px`,
+    height: `${thumbHeight}px`,
+    borderRadius: "6px",
+    backgroundColor: element.style?.color || "#555",
+    left: "50%",
+    top: "50%",
+    transform: "translate(-50%, -50%)",
+    pointerEvents: "none",
+    willChange: "left, top"
+  });
+  return thumb;
+}
+function attachSliderInteraction(container, thumb, element, isHorizontal, onSliderChange) {
+  const activePointers = /* @__PURE__ */ new Set();
+  container.addEventListener("pointerdown", (event) => {
+    event.preventDefault();
+    activePointers.add(event.pointerId);
+    container.setPointerCapture(event.pointerId);
+    updateThumbPosition(event, container, thumb, element, isHorizontal, onSliderChange);
+  });
+  container.addEventListener("pointermove", (event) => {
+    if (!activePointers.has(event.pointerId)) return;
+    event.preventDefault();
+    updateThumbPosition(event, container, thumb, element, isHorizontal, onSliderChange);
+  });
+  const releaseHandler = (event) => {
+    activePointers.delete(event.pointerId);
+  };
+  container.addEventListener("pointerup", releaseHandler);
+  container.addEventListener("pointercancel", releaseHandler);
+}
+function updateThumbPosition(event, container, thumb, element, isHorizontal, onSliderChange) {
+  const rect = container.getBoundingClientRect();
+  let value;
+  if (isHorizontal) {
+    value = (event.clientX - rect.left) / rect.width;
+    value = clamp(value, 0, 1);
+    thumb.style.left = `${value * 100}%`;
+  } else {
+    value = (event.clientY - rect.top) / rect.height;
+    value = clamp(value, 0, 1);
+    thumb.style.top = `${value * 100}%`;
+  }
+  onSliderChange(element.id, element.actionKey, parseFloat(value.toFixed(4)));
+}
+function updateSliderElement(container, element, canvasWidth, canvasHeight) {
+  const pixelX = percentageToPixel(element.position.x, canvasWidth);
+  const pixelY = percentageToPixel(element.position.y, canvasHeight);
+  const referenceDimension = Math.min(canvasWidth, canvasHeight);
+  const trackLength = percentageToPixel(element.length, referenceDimension);
+  const trackThickness = percentageToPixel(4, referenceDimension);
+  const isHorizontal = element.orientation === "horizontal";
+  const trackWidth = isHorizontal ? trackLength : trackThickness;
+  const trackHeight = isHorizontal ? trackThickness : trackLength;
+  const halfW = trackWidth / 2;
+  const halfH = trackHeight / 2;
+  container.style.left = `${pixelX - halfW}px`;
+  container.style.top = `${pixelY - halfH}px`;
+  container.style.width = `${trackWidth}px`;
+  container.style.height = `${trackHeight}px`;
+}
+
 // src/renderer/rendering-engine.ts
 function initializeRenderer(rootElement) {
   const bridge = createIframeBridge();
@@ -739,6 +849,13 @@ function createElementByType(state, element, canvasWidth, canvasHeight) {
         onDpadPress: (elementId, direction, actionKey) => state.bridge.emitDpadPress(elementId, direction, actionKey),
         onDpadRelease: (elementId, direction, actionKey) => state.bridge.emitDpadRelease(elementId, direction, actionKey)
       });
+    case "slider":
+      return createSliderElement({
+        element,
+        canvasWidth,
+        canvasHeight,
+        onSliderChange: (elementId, actionKey, value) => state.bridge.emitSliderChange(elementId, actionKey, value)
+      });
     default:
       return null;
   }
@@ -773,17 +890,24 @@ function createControllerSDK(options) {
   const iframe = createIframeElement(width, height);
   container.appendChild(iframe);
   let bridge = null;
-  iframe.addEventListener("load", () => {
-    bridge = createParentBridge(iframe);
-    if (onInput) {
-      bridge.onInput(onInput);
+  let configSent = false;
+  function sendConfigOnce() {
+    if (configSent || !bridge) return;
+    configSent = true;
+    bridge.sendConfig(config);
+    onReady?.();
+  }
+  bridge = createParentBridge(iframe);
+  if (onInput) {
+    bridge.onInput(onInput);
+  }
+  bridge.onMessage((message) => {
+    if (message.type === "RENDERER_READY" /* RENDERER_READY */) {
+      sendConfigOnce();
     }
-    bridge.onMessage((message) => {
-      if (message.type === "RENDERER_READY" /* RENDERER_READY */) {
-        bridge?.sendConfig(config);
-        onReady?.();
-      }
-    });
+  });
+  iframe.addEventListener("load", () => {
+    sendConfigOnce();
   });
   if (iframeSrc) {
     iframe.src = iframeSrc;
@@ -796,6 +920,7 @@ function createControllerSDK(options) {
     },
     destroy() {
       bridge?.destroy();
+      bridge = null;
       iframe.remove();
     },
     getIframe() {
@@ -995,6 +1120,50 @@ function getEmbeddedRendererScript() {
       canvas.appendChild(container);
     }
 
+    function renderSlider(el, cw, ch, canvas) {
+      const ref = Math.min(cw, ch);
+      const trackLen = percentageToPixel(el.length, ref);
+      const trackThick = percentageToPixel(4, ref);
+      const px = percentageToPixel(el.position.x, cw);
+      const py = percentageToPixel(el.position.y, ch);
+      const isH = el.orientation === 'horizontal';
+      const tw = isH ? trackLen : trackThick;
+      const th = isH ? trackThick : trackLen;
+      const container = document.createElement('div');
+      container.dataset.elementId = el.id;
+      Object.assign(container.style, {
+        position:'absolute', left:(px-tw/2)+'px', top:(py-th/2)+'px',
+        width:tw+'px', height:th+'px', borderRadius:'8px',
+        backgroundColor:'rgba(255,255,255,0.06)', border:'1px solid rgba(255,255,255,0.08)',
+        opacity:String(el.style?.opacity??0.85), zIndex:String(el.zIndex||1),
+        touchAction:'none', userSelect:'none', boxSizing:'border-box'
+      });
+      const thumb = document.createElement('div');
+      const thumbW = isH ? tw*0.2 : tw*0.7;
+      const thumbH = isH ? th*0.7 : th*0.2;
+      Object.assign(thumb.style, {
+        position:'absolute', width:thumbW+'px', height:thumbH+'px',
+        borderRadius:'6px', backgroundColor:el.style?.color||'#555',
+        left:'50%', top:'50%', transform:'translate(-50%,-50%)',
+        pointerEvents:'none', willChange:'left, top'
+      });
+      container.appendChild(thumb);
+      const active = new Set();
+      container.addEventListener('pointerdown', e => { e.preventDefault(); active.add(e.pointerId); container.setPointerCapture(e.pointerId); updateThumb(e); });
+      container.addEventListener('pointermove', e => { if(!active.has(e.pointerId)) return; e.preventDefault(); updateThumb(e); });
+      container.addEventListener('pointerup', e => { active.delete(e.pointerId); });
+      container.addEventListener('pointercancel', e => { active.delete(e.pointerId); });
+      function updateThumb(e) {
+        const rect = container.getBoundingClientRect();
+        let val;
+        if(isH) { val = (e.clientX - rect.left) / rect.width; } else { val = (e.clientY - rect.top) / rect.height; }
+        val = clamp(val, 0, 1);
+        if(isH) thumb.style.left = (val*100)+'%'; else thumb.style.top = (val*100)+'%';
+        emitToParent({type:MessageType.SLIDER_CHANGE,payload:{elementId:el.id,actionKey:el.actionKey,value:parseFloat(val.toFixed(4)),timestamp:Date.now()}});
+      }
+      canvas.appendChild(container);
+    }
+
     function renderConfig(config) {
       const root = document.getElementById('controller-root');
       root.innerHTML = '';
@@ -1012,6 +1181,7 @@ function getEmbeddedRendererScript() {
         if(el.type==='button') renderButton(el, dims.width, dims.height, canvas);
         else if(el.type==='joystick') renderJoystick(el, dims.width, dims.height, canvas);
         else if(el.type==='dpad') renderDpad(el, dims.width, dims.height, canvas);
+        else if(el.type==='slider') renderSlider(el, dims.width, dims.height, canvas);
       }
     }
 
@@ -1042,6 +1212,7 @@ export {
   createIframeBridge,
   createJoystickElement,
   createParentBridge,
+  createSliderElement,
   destroyRenderer,
   distance,
   findAlignmentGuides,
@@ -1056,5 +1227,6 @@ export {
   snapToGrid,
   updateButtonElement,
   updateDpadElement,
-  updateJoystickElement
+  updateJoystickElement,
+  updateSliderElement
 };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@ksteinstudio/game-controller",
-    "version": "1.0.0",
+    "version": "1.0.1",
     "description": "Universal Game Controller Engine - render interactive UI layouts via JSON configuration in an Iframe-based SDK. Percentage-based positioning, multi-touch, zero dependencies.",
     "main": "dist/index.js",
     "types": "dist/index.d.ts",