From d9c4fbbd1dcce12ee05ee33652a5fa518196463d Mon Sep 17 00:00:00 2001
From: KernelDeimos <eric.alex.dube@gmail.com>
Date: Mon, 1 Jul 2024 14:23:41 -0400
Subject: [PATCH] fix: ui color input attributes

---
 src/UI/Components/Slider.js | 19 +++++++++----------
 1 file changed, 9 insertions(+), 10 deletions(-)

diff --git a/src/UI/Components/Slider.js b/src/UI/Components/Slider.js
index 9294b2d4..13c7754a 100644
--- a/src/UI/Components/Slider.js
+++ b/src/UI/Components/Slider.js
@@ -75,10 +75,6 @@ export default def(class Slider extends Component {
     `;
 
     create_template ({ template }) {
-        const min = this.get('min');
-        const max = this.get('max');
-        const value = this.get('value') ?? min;
-        const step = this.get('step') ?? 1;
         const label = this.get('label') ?? this.get('name');
 
         $(template).html(/*html*/`
@@ -87,17 +83,20 @@ export default def(class Slider extends Component {
                 <input class="slider-input" type="range">
             </div>
         `);
-
-        // Set attributes here to prevent XSS injection
-        $(template).find('.slider-input').attr('min', min);
-        $(template).find('.slider-input').attr('max', max);
-        $(template).find('.slider-input').attr('value', value);
-        $(template).find('.slider-input').attr('step', step);
     }
 
     on_ready ({ listen }) {
         const input = this.dom_.querySelector('.slider-input');
 
+        // Set attributes here to prevent XSS injection
+        {
+            const min = this.get('min');
+            input.setAttribute('min', min);
+            input.setAttribute('max', this.get('max'));
+            input.setAttribute('step', this.get('step') ?? 1);
+            input.value = this.get('value') ?? min;
+        }
+
         input.addEventListener('input', e => {
             const on_change = this.get('on_change');
             if (on_change) {