# Help Please! #CSS, #Javascript,#HTML

**URL:** https://discourse.nodered.org/t/help-please-css-javascript-html/78229
**Category:** Dashboard
**Tags:** node-red-dashboard
**Created:** [6 May 2023 19:03 UTC](https://discourse.nodered.org/t/help-please-css-javascript-html/78229 "2023-05-06T19:03:04Z")
**Posts on this page:** 8
**Page:** 1

<div class="post-metadata">

### Author: ![Longhorn1988](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/longhorn1988/32/89864_2.png) [@Longhorn1988](https://discourse.nodered.org/u/Longhorn1988)
#### Post date: [6 May 2023 19:03 UTC](https://discourse.nodered.org/t/help-please-css-javascript-html/78229/1 "2023-05-06T19:03:04Z")

</div>

Can someone explain me how can i use like this code (CSS+JS+HTML) in Node-Red?

> **[JavaScript Knob Slider — CodePel](https://www.codepel.com/vanilla-javascript/javascript-knob-slider/)**
>
> Here is a free JavaScript Knob Slider , Vanilla JavaScript source code with preview. You can view demo online & download code.

---

<div class="post-metadata">

### Author: ![E1cid](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/e1cid/32/77971_2.png) [@E1cid](https://discourse.nodered.org/u/E1cid)
#### Post date: [6 May 2023 19:26 UTC](https://discourse.nodered.org/t/help-please-css-javascript-html/78229/2 "2023-05-06T19:26:12Z")

</div>

To use in dasboard you would add all the code to a ui-template node. You would need to edit the function part if you want the template to send messages. Read the help text to see how that would be done.  
template layout.

```auto
<style>
  css
</style>

html

<script>
  js
</script>

```

---

<div class="post-metadata">

### Author: ![Longhorn1988](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/longhorn1988/32/89864_2.png) [@Longhorn1988](https://discourse.nodered.org/u/Longhorn1988)
#### Post date: [6 May 2023 19:36 UTC](https://discourse.nodered.org/t/help-please-css-javascript-html/78229/3 "2023-05-06T19:36:35Z")

</div>

Tnx for answer.  
i did it what did u say ..  
but there is a problem..  
The knob look like that without function..

 ![knob](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/8/989c9ac4dbd10142f81c257d97371875bf037064.png)

---

<div class="post-metadata">

### Author: ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)
#### Post date: [6 May 2023 19:47 UTC](https://discourse.nodered.org/t/help-please-css-javascript-html/78229/4 "2023-05-06T19:47:09Z")

</div>

Copy all is most often wrong advise. You'll need to copy only what is necessary for that element.

And even then, the container where you put the copy is not mostly same so the outcome may vary.

---

<div class="post-metadata">

### Author: ![Longhorn1988](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/longhorn1988/32/89864_2.png) [@Longhorn1988](https://discourse.nodered.org/u/Longhorn1988)
#### Post date: [8 May 2023 17:11 UTC](https://discourse.nodered.org/t/help-please-css-javascript-html/78229/5 "2023-05-08T17:11:25Z")

</div>

[Knob.txt](https://discourse.nodered.org/uploads/short-url/t4WecIm3invNKr5KkYpDTZC6wke.txt) (8.2 KB)

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/3/8302e27c8cd431d26b60c9381acb7497b09ab0f5.png)

i have cleaned up the code a bit but the code still doesn't work and i can't understand what's wrong....

---

<div class="post-metadata">

### Author: ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)
#### Post date: [8 May 2023 17:52 UTC](https://discourse.nodered.org/t/help-please-css-javascript-html/78229/6 "2023-05-08T17:52:47Z")

</div>

The copy from codepen brings something what ui\_template does not like and it messes up the script.

Did a cleanup for you but also removed all comments so if you need them back, do compare with original.

```auto
[{"id":"fd84f8b527ec0681","type":"ui_template","z":"09deee63c1b960f7","group":"08ac9b242ae51e8c","name":"volume knob","order":1,"width":0,"height":0,"format":"<div class=\"body\">\n <p>Current volume: <span id=\"volumeValue\" class=\"current-value\">0%</span></p>\n <div class=\"knob-surround\">\n\n <div id=\"knob\" class=\"knob\"></div>\n\n <span class=\"min\">Min</span>\n <span class=\"max\">Max</span>\n\n <div id=\"tickContainer\" class=\"ticks\"></div>\n\n\n\n\n <style>\n @font-face {\n font-family: 'Open Sans';\n font-style: normal;\n font-weight: 300;\n src: local('Open Sans Light'), local('OpenSans-Light'),\n url(https://fonts.gstatic.com/s/opensans/v18/mem5YaGs126MiZpBA-UN_r8OUuhs.ttf) format('truetype');\n }\n\n @font-face {\n font-family: 'Varela Round';\n font-style: normal;\n font-weight: 400;\n src: local('Varela Round Regular'), local('VarelaRound-Regular'),\n url(https://fonts.gstatic.com/s/varelaround/v13/w8gdH283Tvk__Lua32TysjIfp8uK.ttf) format('truetype');\n }\n\n body {\n background-color: #181818;\n font-size: 100%;\n font-family: \"Open Sans\", sans-serif;\n color: #aaa;\n text-align: center;\n user-select: none;\n }\n\n .cd__main {\n display: block !important;\n }\n\n .body {\n width: 100%;\n height: 100%;\n background-color: black;\n }\n\n .knob-surround {\n position: relative;\n background-color: grey;\n width: 14em;\n height: 14em;\n border-radius: 50%;\n border: solid 0.25em #0e0e0e;\n margin: 5em auto;\n background: #181818;\n background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #1d1d1d), color-stop(1, #131313));\n background: -ms-linear-gradient(bottom, #1d1d1d, #131313);\n background: -moz-linear-gradient(center bottom, #1d1d1d 0%, #131313 100%);\n background: -o-linear-gradient(#131313, #1d1d1d);\n filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#131313', endColorstr='#1d1d1d', GradientType=0);\n -webkit-box-shadow: 0 0.2em 0.1em 0.05em rgba(255, 255, 255, 0.1) inset, 0 -0.2em 0.1em 0.05em rgba(0, 0, 0, 0.5) inset,\n 0 0.5em 0.65em 0 rgba(0, 0, 0, 0.3);\n -moz-box-shadow: 0 0.2em 0.1em 0.05em rgba(255, 255, 255, 0.1) inset, 0 -0.2em 0.1em 0.05em rgba(0, 0, 0, 0.5) inset, 0 0.5em 0.65em 0 rgba(0, 0, 0, 0.3);\n box-shadow: 0 0.2em 0.1em 0.05em rgba(255, 255, 255, 0.1) inset, 0 -0.2em 0.1em 0.05em rgba(0, 0, 0, 0.5) inset, 0 0.5em 0.65em 0 rgba(0, 0, 0, 0.3);\n }\n\n .knob {\n position: absolute;\n width: 100%;\n height: 100%;\n border-radius: 50%;\n -webkit-transform: rotate(0deg);\n -moz-transform: rotate(0deg);\n -o-transform: rotate(0deg);\n -ms-transform: rotate(0deg);\n transform: rotate(0deg);\n z-index: 10;\n }\n\n .knob:before {\n content: \"\";\n position: absolute;\n bottom: 19%;\n left: 19%;\n width: 3%;\n height: 3%;\n background-color: #a8d8f8;\n border-radius: 50%;\n -webkit-box-shadow: 0 0 0.4em 0 #79c3f4;\n -moz-box-shadow: 0 0 0.4em 0 #79c3f4;\n box-shadow: 0 0 0.4em 0 #79c3f4;\n }\n\n .min,\n .max {\n display: block;\n font-family: \"Varela Round\", sans-serif;\n color: rgba(255, 255, 255, 0.4);\n text-transform: uppercase;\n -webkit-font-smoothing: antialiased;\n font-size: 70%;\n position: absolute;\n opacity: 0.5;\n }\n\n .min {\n bottom: 1em;\n left: -2.5em;\n }\n\n .max {\n bottom: 1em;\n right: -2.5em;\n }\n\n .tick {\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n z-index: 5;\n overflow: visible;\n }\n\n .tick:after {\n content: \"\";\n width: 0.08em;\n height: 0.6em;\n background-color: rgba(255, 255, 255, 0.2);\n position: absolute;\n top: -1.5em;\n left: 50%;\n -webkit-transition: all 180ms ease-out;\n -moz-transition: all 180ms ease-out;\n -o-transition: all 180ms ease-out;\n transition: all 180ms ease-out;\n }\n\n .activetick:after {\n background-color: #a8d8f8;\n -webkit-box-shadow: 0 0 0.3em 0.08em #79c3f4;\n -moz-box-shadow: 0 0 0.3em 0.08em #79c3f4;\n box-shadow: 0 0 0.3em 0.08em #79c3f4;\n -webkit-transition: all 50ms ease-in;\n -moz-transition: all 50ms ease-in;\n -o-transition: all 50ms ease-in;\n transition: all 50ms ease-in;\n }\n\n h1 {\n font-weight: normal;\n margin: 2em 0;\n }\n\n p {\n line-height: 150%;\n max-width: 36em;\n margin: 1em auto;\n }\n\n a {\n color: #aaa;\n text-decoration: none;\n border-bottom: 1px solid #444;\n -webkit-transition: color 0.2s ease-in;\n -moz-transition: color 0.2s ease-in;\n -o-transition: color 0.2s ease-in;\n transition: color 0.2s ease-in;\n }\n\n a:hover,\n a:focus {\n color: #eee;\n }\n\n body,\n .knob {\n background-image:\n url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAgAElEQVR4nMVdeUAWVdf/NY7j4zAim2ia+YqiuGJuFCm4gyFqromiaInkS7igoFgKpamoiKiFCwgEKIpauaKgCC5gLpniirmQS+4LbtCr3x80l9lnHqC+31/wzMy955x77nbuOeeiX79+1L179xio4P3336fVnvGoWbMmvWfPHg4AMjMzWaV3Fi1aRG3cuFG1HqOwtbVlN27caAkADx8+pPPy8uyk7zx69EhWz44dO8h7qampTN++fQmdPF3R0dF0bGwsV1kaeURHR3NOTk4m/v+BAwdq8j9w4EAOt2/fJi95e3vrCp+Hs7OzouArg6KiIkr6W3h4uL3edzY2Nibh/0ePHjWpvcsjICDA1LBhQ00eHj58SJ7/+OOPRE5ubm6q31lYWHCXL1+uskaVgWVZZv/+/dSBAwcMN9bKlSvNaqyoqCjVsp8/f/7PMfc3GjRooKm5oaGhouebNm3ipk6dSgOAk5MTof3UqVMiPsLDw9nc3Fyuc+fOujx06tRJpowiODs7MwMGDBANB6WlpSZXV1f6zz\n\n }\n </style>\n\n\n\n<script>\nvar knobPositionX;\nvar knobPositionY;\nvar mouseX;\nvar mouseY;\nvar knobCenterX;\nvar knobCenterY;\nvar adjacentSide;\nvar oppositeSide;\nvar currentRadiansAngle;\nvar getRadiansInDegrees;\nvar finalAngleInDegrees;\nvar volumeSetting;\nvar tickHighlightPosition;\nvar audio = new Audio(\"https://www.cineblueone.com/maskWall/audio/skylar.mp3\");\nvar startingTickAngle = -135;\nvar tickContainer = document.getElementById(\"tickContainer\");\nvar volumeKnob = document.getElementById(\"knob\");\nvar boundingRectangle = volumeKnob.getBoundingClientRect();\n\nfunction main() {\naudio.volume = 0;\nvolumeKnob.addEventListener(getMouseDown(), onMouseDown);\ndocument.addEventListener(getMouseUp(), onMouseUp);\ncreateTicks(27, 0);\n}\n\n\nfunction onMouseDown() {\nif (audio.paused == true) {\nvar promise = audio.play();\nif (promise !== undefined) {\npromise.then((_) => {audio.play();}).catch((error) => {});\n}\n}\ndocument.addEventListener(getMouseMove(), onMouseMove);\n}\n\n\nfunction onMouseUp() {\ndocument.removeEventListener(getMouseMove(), onMouseMove);\n}\n\nfunction onMouseMove(event) {\nknobPositionX = boundingRectangle.left;\nknobPositionY = boundingRectangle.top;\n\nif (detectMobile() == \"desktop\") {\nmouseX = event.pageX;\nmouseY = event.pageY;\n} else {\nmouseX = event.touches[0].pageX;\nmouseY = event.touches[0].pageY;\n}\n\nknobCenterX = boundingRectangle.width / 2 + knobPositionX;\nknobCenterY = boundingRectangle.height / 2 + knobPositionY;\n\nadjacentSide = knobCenterX - mouseX;\noppositeSide = knobCenterY - mouseY;\n\ncurrentRadiansAngle = Math.atan2(adjacentSide, oppositeSide);\n\ngetRadiansInDegrees = (currentRadiansAngle * 180) / Math.PI;\n\nfinalAngleInDegrees = -(getRadiansInDegrees - 135);\n\n\nif (finalAngleInDegrees >= 0 && finalAngleInDegrees <= 270) { volumeKnob.style.transform=\"rotate(\" + finalAngleInDegrees\n + \"deg)\" ; volumeSetting=Math.floor(finalAngleInDegrees / (270 / 100));\n tickHighlightPosition=Math.round((volumeSetting * 2.7) / 10); createTicks(27, tickHighlightPosition);\n audio.volume=volumeSetting / 100; document.getElementById(\"volumeValue\").innerHTML=volumeSetting + \"%\" ; } }\n function createTicks(numTicks, highlightNumTicks) { while (tickContainer.firstChild) {\n tickContainer.removeChild(tickContainer.firstChild); } for (var i=0; i < numTicks; i++) { var\n tick=document.createElement(\"div\"); if (i < highlightNumTicks) { tick.className=\"tick activetick\" ; } else {\n tick.className=\"tick\" ; } tickContainer.appendChild(tick); tick.style.transform=\"rotate(\" + startingTickAngle\n + \"deg)\" ; startingTickAngle +=10; } startingTickAngle=-135; } function detectMobile() { var\n result=navigator.userAgent.match(/(iphone)|(ipod)|(ipad)|(android)|(blackberry)|(windows phone)|(symbian)/i); if\n (result !==null) { return \"mobile\" ; } else { return \"desktop\" ; } } function getMouseDown() { if\n (detectMobile()==\"desktop\" ) { return \"mousedown\" ; } else { return \"touchstart\" ; } } function getMouseUp() { if\n (detectMobile()==\"desktop\" ) { return \"mouseup\" ; } else { return \"touchend\" ; } } function getMouseMove() { if\n (detectMobile()==\"desktop\" ) { return \"mousemove\" ; } else { return \"touchmove\" ; } } main();\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":950,"y":3240,"wires":[[]]},{"id":"08ac9b242ae51e8c","type":"ui_group","name":"Default","tab":"2acb95821445c8af","order":1,"disp":true,"width":"6","collapse":false,"className":""},{"id":"2acb95821445c8af","type":"ui_tab","name":"Home","icon":"dashboard","order":4,"disabled":false,"hidden":false}]

```

---

<div class="post-metadata">

### Author: ![Longhorn1988](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/longhorn1988/32/89864_2.png) [@Longhorn1988](https://discourse.nodered.org/u/Longhorn1988)
#### Post date: [10 May 2023 16:57 UTC](https://discourse.nodered.org/t/help-please-css-javascript-html/78229/7 "2023-05-10T16:57:08Z")

</div>

> [@hotNipi](#):
>
> ```auto
> [{"id":"fd84f8b527ec0681","type":"ui_template","z":"09deee63c1b960f7","group":"08ac9b242ae51e8c","name":"volume knob","order":1,"width":0,"height":0,"format":"<div class=\"body\">\n <p>Current volume: <span id=\"volumeValue\" class=\"current-value\">0%</span></p>\n <div class=\"knob-surround\">\n\n <div id=\"knob\" class=\"knob\"></div>\n\n <span class=\"min\">Min</span>\n <span class=\"max\">Max</span>\n\n <div id=\"tickContainer\" class=\"ticks\"></div>\n\n\n\n\n <style>\n @font-face {\n font-family: 'Open Sans';\n font-style: normal;\n font-weight: 300;\n src: local('Open Sans Light'), local('OpenSans-Light'),\n url(https://fonts.gstatic.com/s/opensans/v18/mem5YaGs126MiZpBA-UN_r8OUuhs.ttf) format('truetype');\n }\n\n @font-face {\n font-family: 'Varela Round';\n font-style: normal;\n font-weight: 400;\n src: local('Varela Round Regular'), local('VarelaRound-Regular'),\n url(https://fonts.gstatic.com/s/varelaround/v13/w8gdH283Tvk__Lua32TysjIfp8uK.ttf) format('truetype');\n }\n\n body {\n background-color: #181818;\n font-size: 100%;\n font-family: \"Open Sans\", sans-serif;\n color: #aaa;\n text-align: center;\n user-select: none;\n }\n\n .cd__main {\n display: block !important;\n }\n\n .body {\n width: 100%;\n height: 100%;\n background-color: black;\n }\n\n .knob-surround {\n position: relative;\n background-color: grey;\n width: 14em;\n height: 14em;\n border-radius: 50%;\n border: solid 0.25em #0e0e0e;\n margin: 5em auto;\n background: #181818;\n background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #1d1d1d), color-stop(1, #131313));\n background: -ms-linear-gradient(bottom, #1d1d1d, #131313);\n background: -moz-linear-gradient(center bottom, #1d1d1d 0%, #131313 100%);\n background: -o-linear-gradient(#131313, #1d1d1d);\n filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#131313', endColorstr='#1d1d1d', GradientType=0);\n -webkit-box-shadow: 0 0.2em 0.1em 0.05em rgba(255, 255, 255, 0.1) inset, 0 -0.2em 0.1em 0.05em rgba(0, 0, 0, 0.5) inset,\n 0 0.5em 0.65em 0 rgba(0, 0, 0, 0.3);\n -moz-box-shadow: 0 0.2em 0.1em 0.05em rgba(255, 255, 255, 0.1) inset, 0 -0.2em 0.1em 0.05em rgba(0, 0, 0, 0.5) inset, 0 0.5em 0.65em 0 rgba(0, 0, 0, 0.3);\n box-shadow: 0 0.2em 0.1em 0.05em rgba(255, 255, 255, 0.1) inset, 0 -0.2em 0.1em 0.05em rgba(0, 0, 0, 0.5) inset, 0 0.5em 0.65em 0 rgba(0, 0, 0, 0.3);\n }\n\n .knob {\n position: absolute;\n width: 100%;\n height: 100%;\n border-radius: 50%;\n -webkit-transform: rotate(0deg);\n -moz-transform: rotate(0deg);\n -o-transform: rotate(0deg);\n -ms-transform: rotate(0deg);\n transform: rotate(0deg);\n z-index: 10;\n }\n\n .knob:before {\n content: \"\";\n position: absolute;\n bottom: 19%;\n left: 19%;\n width: 3%;\n height: 3%;\n background-color: #a8d8f8;\n border-radius: 50%;\n -webkit-box-shadow: 0 0 0.4em 0 #79c3f4;\n -moz-box-shadow: 0 0 0.4em 0 #79c3f4;\n box-shadow: 0 0 0.4em 0 #79c3f4;\n }\n\n .min,\n .max {\n display: block;\n font-family: \"Varela Round\", sans-serif;\n color: rgba(255, 255, 255, 0.4);\n text-transform: uppercase;\n -webkit-font-smoothing: antialiased;\n font-size: 70%;\n position: absolute;\n opacity: 0.5;\n }\n\n .min {\n bottom: 1em;\n left: -2.5em;\n }\n\n .max {\n bottom: 1em;\n right: -2.5em;\n }\n\n .tick {\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n z-index: 5;\n overflow: visible;\n }\n\n .tick:after {\n content: \"\";\n width: 0.08em;\n height: 0.6em;\n background-color: rgba(255, 255, 255, 0.2);\n position: absolute;\n top: -1.5em;\n left: 50%;\n -webkit-transition: all 180ms ease-out;\n -moz-transition: all 180ms ease-out;\n -o-transition: all 180ms ease-out;\n transition: all 180ms ease-out;\n }\n\n .activetick:after {\n background-color: #a8d8f8;\n -webkit-box-shadow: 0 0 0.3em 0.08em #79c3f4;\n -moz-box-shadow: 0 0 0.3em 0.08em #79c3f4;\n box-shadow: 0 0 0.3em 0.08em #79c3f4;\n -webkit-transition: all 50ms ease-in;\n -moz-transition: all 50ms ease-in;\n -o-transition: all 50ms ease-in;\n transition: all 50ms ease-in;\n }\n\n h1 {\n font-weight: normal;\n margin: 2em 0;\n }\n\n p {\n line-height: 150%;\n max-width: 36em;\n margin: 1em auto;\n }\n\n a {\n color: #aaa;\n text-decoration: none;\n border-bottom: 1px solid #444;\n -webkit-transition: color 0.2s ease-in;\n -moz-transition: color 0.2s ease-in;\n -o-transition: color 0.2s ease-in;\n transition: color 0.2s ease-in;\n }\n\n a:hover,\n a:focus {\n color: #eee;\n }\n\n body,\n .knob {\n background-image:\n url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAgAElEQVR4nMVdeUAWVdf/NY7j4zAim2ia+YqiuGJuFCm4gyFqromiaInkS7igoFgKpamoiKiFCwgEKIpauaKgCC5gLpniirmQS+4LbtCr3x80l9lnHqC+31/wzMy955x77nbuOeeiX79+1L179xio4P3336fVnvGoWbMmvWfPHg4AMjMzWaV3Fi1aRG3cuFG1HqOwtbVlN27caAkADx8+pPPy8uyk7zx69EhWz44dO8h7qampTN++fQmdPF3R0dF0bGwsV1kaeURHR3NOTk4m/v+BAwdq8j9w4EAOt2/fJi95e3vrCp+Hs7OzouArg6KiIkr6W3h4uL3edzY2Nibh/0ePHjWpvcsjICDA1LBhQ00eHj58SJ7/+OOPRE5ubm6q31lYWHCXL1+uskaVgWVZZv/+/dSBAwcMN9bKlSvNaqyoqCjVsp8/f/7PMfc3GjRooKm5oaGhouebNm3ipk6dSgOAk5MTof3UqVMiPsLDw9nc3Fyuc+fOujx06tRJpowiODs7MwMGDBANB6WlpSZXV1f6zz\n\n }\n </style>\n\n\n\n<script>\nvar knobPositionX;\nvar knobPositionY;\nvar mouseX;\nvar mouseY;\nvar knobCenterX;\nvar knobCenterY;\nvar adjacentSide;\nvar oppositeSide;\nvar currentRadiansAngle;\nvar getRadiansInDegrees;\nvar finalAngleInDegrees;\nvar volumeSetting;\nvar tickHighlightPosition;\nvar audio = new Audio(\"https://www.cineblueone.com/maskWall/audio/skylar.mp3\");\nvar startingTickAngle = -135;\nvar tickContainer = document.getElementById(\"tickContainer\");\nvar volumeKnob = document.getElementById(\"knob\");\nvar boundingRectangle = volumeKnob.getBoundingClientRect();\n\nfunction main() {\naudio.volume = 0;\nvolumeKnob.addEventListener(getMouseDown(), onMouseDown);\ndocument.addEventListener(getMouseUp(), onMouseUp);\ncreateTicks(27, 0);\n}\n\n\nfunction onMouseDown() {\nif (audio.paused == true) {\nvar promise = audio.play();\nif (promise !== undefined) {\npromise.then((_) => {audio.play();}).catch((error) => {});\n}\n}\ndocument.addEventListener(getMouseMove(), onMouseMove);\n}\n\n\nfunction onMouseUp() {\ndocument.removeEventListener(getMouseMove(), onMouseMove);\n}\n\nfunction onMouseMove(event) {\nknobPositionX = boundingRectangle.left;\nknobPositionY = boundingRectangle.top;\n\nif (detectMobile() == \"desktop\") {\nmouseX = event.pageX;\nmouseY = event.pageY;\n} else {\nmouseX = event.touches[0].pageX;\nmouseY = event.touches[0].pageY;\n}\n\nknobCenterX = boundingRectangle.width / 2 + knobPositionX;\nknobCenterY = boundingRectangle.height / 2 + knobPositionY;\n\nadjacentSide = knobCenterX - mouseX;\noppositeSide = knobCenterY - mouseY;\n\ncurrentRadiansAngle = Math.atan2(adjacentSide, oppositeSide);\n\ngetRadiansInDegrees = (currentRadiansAngle * 180) / Math.PI;\n\nfinalAngleInDegrees = -(getRadiansInDegrees - 135);\n\n\nif (finalAngleInDegrees >= 0 && finalAngleInDegrees <= 270) { volumeKnob.style.transform=\"rotate(\" + finalAngleInDegrees\n + \"deg)\" ; volumeSetting=Math.floor(finalAngleInDegrees / (270 / 100));\n tickHighlightPosition=Math.round((volumeSetting * 2.7) / 10); createTicks(27, tickHighlightPosition);\n audio.volume=volumeSetting / 100; document.getElementById(\"volumeValue\").innerHTML=volumeSetting + \"%\" ; } }\n function createTicks(numTicks, highlightNumTicks) { while (tickContainer.firstChild) {\n tickContainer.removeChild(tickContainer.firstChild); } for (var i=0; i < numTicks; i++) { var\n tick=document.createElement(\"div\"); if (i < highlightNumTicks) { tick.className=\"tick activetick\" ; } else {\n tick.className=\"tick\" ; } tickContainer.appendChild(tick); tick.style.transform=\"rotate(\" + startingTickAngle\n + \"deg)\" ; startingTickAngle +=10; } startingTickAngle=-135; } function detectMobile() { var\n result=navigator.userAgent.match(/(iphone)|(ipod)|(ipad)|(android)|(blackberry)|(windows phone)|(symbian)/i); if\n (result !==null) { return \"mobile\" ; } else { return \"desktop\" ; } } function getMouseDown() { if\n (detectMobile()==\"desktop\" ) { return \"mousedown\" ; } else { return \"touchstart\" ; } } function getMouseUp() { if\n (detectMobile()==\"desktop\" ) { return \"mouseup\" ; } else { return \"touchend\" ; } } function getMouseMove() { if\n (detectMobile()==\"desktop\" ) { return \"mousemove\" ; } else { return \"touchmove\" ; } } main();\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":950,"y":3240,"wires":[[]]},{"id":"08ac9b242ae51e8c","type":"ui_group","name":"Default","tab":"2acb95821445c8af","order":1,"disp":true,"width":"6","collapse":false,"className":""},{"id":"2acb95821445c8af","type":"ui_tab","name":"Home","icon":"dashboard","order":4,"disabled":false,"hidden":false}]
> 
> ```

I did understand my problem and i know more about ui\_template..  
Thank u again for ur help.. 🙂

---

<div class="post-metadata">

### Author: ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)
#### Post date: [9 June 2023 16:58 UTC](https://discourse.nodered.org/t/help-please-css-javascript-html/78229/8 "2023-06-09T16:58:07Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.