Add colors to sliders

nodes/widgets/ui_slider.html

@@ -32,6 +32,9 @@
                 min: { value: 0, required: true, validate: RED.validators.number() },
                 max: { value: 10, required: true, validate: RED.validators.number() },
                 step: { value: 1 },
+                color: {value: ''},
+                colorTrack: {value: ''},
+                colorThumb: {value: ''},
                 className: { value: '' }
             },
             inputs: 1,
@@ -145,6 +148,23 @@
                 </div>
             </div>
         </div>
+        <div class="form-row">
+            <label for="node-input-min"><i class="fa fa-adjust"></i> Color</label>
+            <div style="display: grid; grid-template-columns: repeat(3, 1fr); width: 70%">
+                <div>
+                    <span for="node-input-color">main</span>
+                    <input type="text" id="node-input-color" style="width:60px">
+                </div>
+                <div>
+                    <span for="not-input-colorTrack">track</span>
+                    <input type="text" id="node-input-colorTrack" style="width:60px">
+                </div>
+                <div>
+                    <span for="not-input-colorThumb">thumb</span>
+                    <input type="text" id="node-input-colorThumb" style="width:60px">
+                </div>
+            </div>
+        </div>        
         <div class="form-row">
             <label for="node-input-outs"><i class="fa fa-sign-out"></i> Output</label>
             <select id="node-input-outs" style="width:204px">

nodes/widgets/ui_slider.js

@@ -45,6 +45,15 @@ module.exports = function (RED) {
                     if (typeof (updates.max) !== 'undefined') {
                         statestore.set(group.getBase(), node, msg, 'max', updates.max)
                     }
+                    if (typeof (updates.color) !== 'undefined') {
+                        statestore.set(group.getBase(), node, msg, 'color', updates.color)
+                    }   
+                    if (typeof (updates.color-track) !== 'undefined') {
+                        statestore.set(group.getBase(), node, msg, 'color-track', updates.color-track)
+                    }   
+                    if (typeof (updates.color-thumb) !== 'undefined') {
+                        statestore.set(group.getBase(), node, msg, 'color-thumb', updates.color-thumb)
+                    }                                                            
                 }
                 return msg
             }

ui/src/widgets/ui-slider/UISlider.vue

@@ -6,6 +6,7 @@
         :class="className" :thumb-label="thumbLabel"
         :min="min"
         :max="max" :step="props.step || 1" @update:model-value="onChange" @end="onBlur"
+        :color="color" :track-color="colorTrack" :thumb-color="colorThumb"
     />
 </template>
 
@@ -28,7 +29,10 @@ export default {
                 label: null,
                 thumbLabel: null,
                 min: null,
-                max: null
+                max: null,
+                color: null,
+                colorTrack: null,
+                colorThumb: null                
             }
         }
     },
@@ -51,6 +55,15 @@ export default {
         },
         max: function () {
             return this.dynamic.max !== null ? this.dynamic.max : this.props.max
+        },
+        color: function () {
+            return this.dynamic.color !== null ? this.dynamic.color : this.props.color
+        },
+        colorTrack: function () {
+            return this.dynamic.colorTrack !== null ? this.dynamic.colorTrack : this.props.colorTrack
+        },
+        colorThumb: function () {
+            return this.dynamic.colorThumb !== null ? this.dynamic.colorThumb : this.props.colorThumb
         }
     },
     watch: {