diff --git a/index.html b/index.html
index c9897ee..112c8d9 100644
--- a/index.html
+++ b/index.html
@@ -210,18 +210,12 @@
           <input type="color" id="colorPicker" />
         </div>
 
-        <div style="display: flex; align-items: center; margin: 20px 0px">
-          <label for="rotate" style="margin-right: 8px">Rotasi</label>
-          <input
-            type="range"
-            min="-180"
-            max="180"
-            step="1"
-            value="0"
-            id="rotate"
-            style="margin: 0 8px 0 0"
-          />
-          <output id="rotate-val">0°</output>
+
+        <div style="display: flex; align-items: center; margin: 20px 0px;">
+          <label for="rotate" style="margin-right:8px">Rotasi</label>
+          <input type="range" min="-180" max="180" step="1" value="0" id="rotate" style="margin:0 8px 0 0">
+          <input type="text" size="1" id="rotate-input" value="0" >
+
         </div>
 
         <div style="display: flex; align-items: center; margin: 20px 0px">
diff --git a/script.js b/script.js
index 6e9569c..5271e47 100644
--- a/script.js
+++ b/script.js
@@ -45,6 +45,7 @@ const downloadAnchor = document.querySelector('#download');
 const elementOpacity = document.querySelector('#opacity');
 const labelFile = document.querySelector('.label-file');
 const elementRotate = document.querySelector('#rotate');
+const elementInputRotate = document.querySelector('#rotate-input');
 const closeBtn = document.querySelector('.close-btn');
 const resetAnchor = document.querySelector('#reset');
 const navBar = document.querySelector('.nav-bar');
@@ -108,6 +109,20 @@ window.addEventListener('DOMContentLoaded', () => {
     draggable();
   });
 
+  // bagian pengaturan rotasi teks 
+  elementRotate.addEventListener('input', function () {
+		let rotVal = elementRotate.value;
+		document.getElementById('rotate-input').value = rotVal;
+    draggable(img);
+  });
+  
+  elementInputRotate.addEventListener('input', function () {
+    let rotVal = elementInputRotate.value;
+		document.getElementById('rotate').value = rotVal;
+		draggable(img);
+  });
+  // bagian pengaturan rotasi teks 
+	
   selectPosition.addEventListener('input', function () {
     const position = selectPosition.value;
 
@@ -153,11 +168,6 @@ window.addEventListener('DOMContentLoaded', () => {
     draggable(img);
   });
 
-  elementRotate.addEventListener('input', function () {
-    draggable(img);
-    document.getElementById('rotate-val').innerHTML = elementRotate.value + '°';
-  });
-
   canvas.addEventListener('click', function (e) {
     selectedText = 1;
     mouseXY(e);
@@ -349,6 +359,7 @@ function dispatchEvent(element, eventName) {
     const event = document.createEvent('HTMLEvents');
     event.initEvent(eventName, false, true);
 
+
     element.dispatchEvent(event);
   } else {
     element.fireEvent(eventName); // only for backward compatibility (older browsers)