Add custom color attributes for slider and thumb

node-projects · Jul 23, 2024 · e1e53c8 · e1e53c8
1 parent 07db140
commit e1e53c8
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 18 deletions.
diff --git a/custom-elements.json b/custom-elements.json
@@ -26,6 +26,14 @@
                         {
                             "name": "value-max",
                             "fieldName": "value-max"
+                        },
+                        {
+                            "name": "slider-color",
+                            "fieldName": "slider-color"
+                        },
+                        {
+                            "name": "thumb-color",
+                            "fieldName": "thumb-color"
                         }
                     ],
                     "events": [
@@ -42,20 +50,6 @@
                             "type": {
                                 "title": "String"
                             }
-                        },
-                        {
-                            "name": "min-attribute-changed",
-                            "description": "Is raised when the min attribute changes",
-                            "type": {
-                                "title": "String"
-                            }
-                        },
-                        {
-                            "name": "max-changed",
-                            "description": "Is raised when the max attribute changes",
-                            "type": {
-                                "title": "String"
-                            }
                         }
                     ],
                     "superclass": {

diff --git a/src/slider/SliderWebcomponent.ts b/src/slider/SliderWebcomponent.ts
@@ -14,13 +14,18 @@ export class SliderWebcomponent extends BaseCustomWebComponentConstructorAppend
             border-radius: 5px; 
         } 
         
+        :host {
+            --slider-color: #01940b;
+            --thumb-color: #555;
+        }
+
         .slider-container #slider { 
             height: 100%; 
             left: 25%; 
             right: 25%; 
             position: absolute; 
             border-radius: 5px; 
-            background: #01940b; 
+            background: var(--slider-color); 
         } 
         
         .range-input { 
@@ -43,7 +48,7 @@ export class SliderWebcomponent extends BaseCustomWebComponentConstructorAppend
             height: 18px; 
             width: 18px; 
             border-radius: 70%; 
-            background: #555; 
+            background: var(--thumb-color);
             pointer-events: auto; 
             appearance: none; 
         } 
@@ -52,7 +57,7 @@ export class SliderWebcomponent extends BaseCustomWebComponentConstructorAppend
             height: 18px; 
             width: 18px; 
             border-radius: 70%; 
-            background: #555; 
+            background: var(--thumb-color);
             pointer-events: auto; 
             appearance: none; 
         }
@@ -99,7 +104,7 @@ export class SliderWebcomponent extends BaseCustomWebComponentConstructorAppend
 
     public static readonly is = 'node-projects-slider';
 
-    static observedAttributes = ['value-min', 'value-max', 'min', 'max'];
+    static observedAttributes = ['value-min', 'value-max', 'min', 'max', 'slider-color', 'thumb-color'];
 
     private _rangeInputs: HTMLInputElement[];
     private _valuesGap: number = 1;
@@ -115,6 +120,10 @@ export class SliderWebcomponent extends BaseCustomWebComponentConstructorAppend
         if (name === "min" || name === "max") {
             this._updateRangeInputsMinMax();
         }
+
+        if (name === "slider-color" || name === "thumb-color") {
+            this.style.setProperty(`--${name}`, newValue);
+        }
     }
 
     constructor() {