Reversed slider

[bartbutenaers]

Description

When a user configures a ui slider with min > max then the slider should be reverted.

This PR makes use of the slider reverse property (see API).
Note that the min that you bind to a v-slider widget, should always be smaller to the max value. For example:

<v-slider :min="10" :max="40" reverse=true </v-slider>

Example flow:

[{"id":"9dd9782c30f4484c","type":"ui-slider","z":"4aad778b57d4f47b","group":"bd4b3eed126bd60e","name":"Normal slider","label":"slider","tooltip":"","order":0,"width":0,"height":0,"passthru":false,"outs":"all","topic":"topic","topicType":"msg","thumbLabel":"true","showTicks":"always","min":"20","max":"50","step":1,"className":"","iconPrepend":"","iconAppend":"","color":"","colorTrack":"","colorThumb":"","x":3050,"y":600,"wires":[[]]},{"id":"c106344a875db7b9","type":"ui-slider","z":"4aad778b57d4f47b","group":"bd4b3eed126bd60e","name":"Reverted slider","label":"slider","tooltip":"","order":0,"width":0,"height":0,"passthru":false,"outs":"all","topic":"topic","topicType":"msg","thumbLabel":"true","showTicks":"always","min":"50","max":"20","step":1,"className":"","iconPrepend":"","iconAppend":"","color":"","colorTrack":"","colorThumb":"","x":3060,"y":660,"wires":[[]]},{"id":"bd4b3eed126bd60e","type":"ui-group","name":"Html labels demo","page":"febf51051870b4b5","width":"6","height":"1","order":1,"showTitle":true,"className":"","visible":"true","disabled":"false"},{"id":"febf51051870b4b5","type":"ui-page","name":"Experimenten labels","ui":"be29745a6e568f30","path":"/experiment_labels","icon":"home","layout":"grid","theme":"a965ccfef139317a","breakpoints":[{"name":"Default","px":"0","cols":"3"},{"name":"Tablet","px":"576","cols":"6"},{"name":"Small Desktop","px":"768","cols":"9"},{"name":"Desktop","px":"1024","cols":"12"}],"order":1,"className":"","visible":false,"disabled":"false"},{"id":"be29745a6e568f30","type":"ui-base","name":"Node-RED","path":"/dashboard","appIcon":"","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control","ui-chart","ui-text-input","ui-dropdown"],"showPathInSidebar":false,"showPageTitle":true,"navigationStyle":"icon","titleBarStyle":"default"},{"id":"a965ccfef139317a","type":"ui-theme","name":"Default","colors":{"surface":"#404040","primary":"#109fbc","bgPage":"#e8e8e8","groupBg":"#d6d6d6","groupOutline":"#6fbc10"},"sizes":{"pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"12px"}}]

Related Issue(s)

Closes #1499

Checklist

• I have read the contribution guidelines
• Suitable unit/system level tests have been added and they pass
• Documentation has been updated
  • Upgrade instructions
  • Configuration details
  • Concepts
• Changes flowforge.yml?
  • Issue/PR raised on FlowFuse/helm to update ConfigMap Template
  • Issue/PR raised on FlowFuse/CloudProject to update values for Staging/Production

Labels

• Includes a DB migration? -> add the area:migration label

[joepavitt]

One minor typo, but otherwise - great stuff!