Slider text field

cypress/fixtures/flows/dashboard-slider.json

@@ -329,5 +329,81 @@
                 "dashboard-ui-slider"
             ]
         ]
+    },
+    {
+        "id": "dashboard-ui-button-dynamic-textfield",
+        "type": "ui-button",
+        "z": "node-red-tab-slider",
+        "group": "dashboard-ui-group",
+        "name": "Show Text Field",
+        "label": "Show Text Field",
+        "order": 0,
+        "width": 0,
+        "height": 0,
+        "emulateClick": false,
+        "tooltip": "",
+        "color": "",
+        "bgcolor": "",
+        "className": "",
+        "icon": "",
+        "iconPosition": "left",
+        "payload": "",
+        "payloadType": "str",
+        "topic": "topic",
+        "topicType": "msg",
+        "buttonColor": "",
+        "textColor": "",
+        "iconColor": "",
+        "enableClick": true,
+        "enablePointerdown": false,
+        "pointerdownPayload": "",
+        "pointerdownPayloadType": "str",
+        "enablePointerup": false,
+        "pointerupPayload": "",
+        "pointerupPayloadType": "str",
+        "x": 180,
+        "y": 280,
+        "wires": [
+            [
+                "dashboard-ui-set-property-textfield"
+            ]
+        ]
+    },
+    {
+        "id": "dashboard-ui-set-property-textfield",
+        "type": "change",
+        "z": "node-red-tab-slider",
+        "name": "",
+        "rules": [
+            {
+                "t": "delete",
+                "p": "payload",
+                "pt": "msg"
+            },
+            {
+                "t": "delete",
+                "p": "topic",
+                "pt": "msg"
+            },
+            {
+                "t": "set",
+                "p": "ui_update.showTextField",
+                "pt": "msg",
+                "to": "true",
+                "tot": "bool"
+            }
+        ],
+        "action": "",
+        "property": "",
+        "from": "",
+        "to": "",
+        "reg": false,
+        "x": 380,
+        "y": 280,
+        "wires": [
+            [
+                "dashboard-ui-slider"
+            ]
+        ]
     }
 ]

cypress/tests/widgets/slider.spec.js

@@ -47,4 +47,35 @@ describe('Node-RED Dashboard 2.0 - Slider (Dynamic Properties)', () => {
         // check the min value is updated
         cy.get('#nrdb-ui-widget-dashboard-ui-slider').find('.v-slider-thumb').should('have.attr', 'aria-valuemax', '50')
     })
+    it('include "showTextField"', () => {
+        // First, check that the text field does not exist
+        cy.get('#nrdb-ui-widget-dashboard-ui-slider').within(() => { cy.get('#nrdb-ui-widget-dashboard-ui-slider-text-field').should('not.exist') })
+        cy.clickAndWait(cy.get('#nrdb-ui-widget-dashboard-ui-button-dynamic-textfield'))
+        // Check if the text field is present when showTextField is true
+        cy.get('#nrdb-ui-widget-dashboard-ui-slider').within(() => { cy.get('#nrdb-ui-widget-dashboard-ui-slider-text-field').should('exist') })
+    })
+    it('text field validation for max value', () => {
+        // Extract the max value from the slider thumb and store it in a variable
+        // eslint-disable-next-line promise/always-return, promise/catch-or-return
+        cy.get('#nrdb-ui-widget-dashboard-ui-slider-text-field').invoke('attr', 'max').then((maxValue) => {
+            const greaterThanMaxValue = parseInt(maxValue) + 10
+            cy.clickAndWait(cy.get('#nrdb-ui-widget-dashboard-ui-slider-text-field'), 200)
+            // then we can type into the input
+            cy.get('#nrdb-ui-widget-dashboard-ui-slider-text-field').type(`{selectall}{del}${greaterThanMaxValue}`)
+            cy.focused().blur()
+            cy.get('#nrdb-ui-widget-dashboard-ui-slider-text-field').should('have.value', maxValue)
+        })
+    })
+    it('text field validation for min value', () => {
+        // Extract the min value from the slider thumb and store it in a variable
+        // eslint-disable-next-line promise/catch-or-return, promise/always-return
+        cy.get('#nrdb-ui-widget-dashboard-ui-slider-text-field').invoke('attr', 'min').then((minValue) => {
+            const lessThanMinValue = parseInt(minValue) - 20
+            cy.clickAndWait(cy.get('#nrdb-ui-widget-dashboard-ui-slider-text-field'), 200)
+            // then we can type into the input
+            cy.get('#nrdb-ui-widget-dashboard-ui-slider-text-field').type(`{selectall}{del}${lessThanMinValue}`)
+            cy.focused().blur()
+            cy.get('#nrdb-ui-widget-dashboard-ui-slider-text-field').should('have.value', minValue)
+        })
+    })
 })

docs/nodes/widgets/ui-slider.md

@@ -59,6 +59,9 @@ dynamic:
     Class:
         payload: msg.ui_update.class
         structure: ["String"]
+    Show Text Field:
+        payload: msg.ui_update.showTextField
+        structure: ["true | false"]
 ---
 
 <script setup>

nodes/widgets/locales/en-US/ui_slider.html

@@ -30,6 +30,8 @@ <h3>Properties</h3>
             Add <a href="https://pictogrammers.com/library/mdi/">mdi icon</a> before and after the slider.
             For example, "minus". There is no need to include the "mdi-" prefix, just the name of the icon.
         </dd>
+        <dt>Show Text Field <span class="property-type">true | false</span></dt>
+        <dd>Defined when text field will be visible next to slider. Defaults to 'false'.</dd>
     </dl>
     <h3>Dynamic Properties (Inputs)</h3>
     <p>Any of the following can be appended to a <code>msg.ui_update.</code> in order to override or set properties on this node at runtime.</p>
@@ -81,4 +83,8 @@ <h3>Dynamic Properties (Inputs)</h3>
         <dt class="optional">class <span class="property-type">string</span></dt>
         <dd>Add a CSS class, or more, to the Button at runtime.</dd>
     </dl>
+    <dl class="message-properties">
+        <dt class="optional">showTextField <span class="property-type">true | false</span></dt>
+        <dd>Show text field next to slider.</dd>
+    </dl>
 </script>

nodes/widgets/locales/en-US/ui_slider.json

@@ -0,0 +1,21 @@
+{
+    "ui-slider": {
+        "label": {
+            "name": "Name",
+            "group": "Group",
+            "size": "Size",
+            "class": "Class",
+            "label": "Label",
+            "thumb": "Thumb",
+            "ticks": "Ticks",
+            "range": "Range",
+            "min": "min.",
+            "max": "max.",
+            "step": "step",
+            "icons": "Icons",
+            "color": "Color",
+            "outputs": "Output",
+            "showTextField": "Show Text Field"
+        }
+    }
+}

nodes/widgets/ui_slider.html

@@ -38,7 +38,8 @@
                 iconAppend: { value: '' },
                 color: { value: '' },
                 colorTrack: { value: '' },
-                colorThumb: { value: '' }
+                colorThumb: { value: '' },
+                showTextField: { value: false }
             },
             inputs: 1,
             outputs: 1,
@@ -86,6 +87,12 @@
                     $('#node-input-showTicks').val('false')
                 }
 
+                // handle no value for showTextField (from sliders created before this was a value)
+                if (!this.showTextField) {
+                    this.showTextField = false
+                    $('#node-input-showTextField').val(false)
+                }
+
                 // use jQuery UI tooltip to convert the plain old title attribute to a nice tooltip
                 $('.ui-node-popover-title').tooltip({
                     show: {
@@ -225,6 +232,11 @@
             <label style="width:auto" for="node-input-passthru"><i class="fa fa-arrow-right"></i> If <code>msg</code> arrives on input, pass through to output: </label>
             <input type="checkbox" checked id="node-input-passthru" style="display:inline-block; width:auto; vertical-align:top;">
         </div>
+
+        <div class="form-row form-row-flex" style="align-items: center;">
+            <input style="margin: 8px 0 10px 16px; width:20px;" type="checkbox" id="node-input-showTextField">
+            <label style="width:auto" for="node-input-showTextField"><span data-i18n="ui-slider.label.showTextField"></span></label>
+        </div>
         <div class="form-row">
             <label style="width:auto" for="node-input-payload"><i class="fa fa-envelope-o"></i> When changed, send:</label>
         </div>

nodes/widgets/ui_slider.js

@@ -79,6 +79,9 @@ module.exports = function (RED) {
                     if (typeof (updates.colorThumb) !== 'undefined') {
                         statestore.set(group.getBase(), node, msg, 'colorThumb', updates.colorThumb)
                     }
+                    if (typeof (updates.showTextField) !== 'undefined') {
+                        statestore.set(group.getBase(), node, msg, 'showTextField', updates.showTextField)
+                    }
                 }
                 return msg
             }

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

@@ -16,6 +16,20 @@
             <!-- eslint-disable-next-line vue/no-v-html -->
             <span v-html="label" />
         </template>
+        <template v-if="showTextField" #append>
+            <v-text-field
+                id="nrdb-ui-widget-dashboard-ui-slider-text-field"
+                v-model.number="value"
+                density="compact"
+                style="width: 80px"
+                type="number"
+                variant="outlined"
+                hide-details
+                :min="min"
+                :max="max"
+                @blur="validateInput"
+            />
+        </template>
     </v-slider>
 </template>
 
@@ -93,6 +107,9 @@ export default {
         },
         colorThumb: function () {
             return this.getProperty('colorThumb')
+        },
+        showTextField: function () {
+            return this.getProperty('showTextField')
         }
     },
     watch: {
@@ -148,6 +165,15 @@ export default {
             this.updateDynamicProperty('color', updates.color)
             this.updateDynamicProperty('colorTrack', updates.colorTrack)
             this.updateDynamicProperty('colorThumb', updates.colorThumb)
+            this.updateDynamicProperty('showTextField', updates.showTextField)
+        },
+        // validate the text field input
+        validateInput () {
+            if (this.value < this.min) {
+                this.value = this.min
+            } else if (this.value > this.max) {
+                this.value = this.max
+            }
         }
     }
 }