Hi Phil,

We haven't got a video demo specifically of this, but it's not too difficult to do. Have a look in the widget browser in the gauges, switches and sliders category. These are very similar but with one important difference - gauges and switches only display values, whereas sliders also allow you to set values by clicking and dragging on them.

To use a gauge or switch:

Select the gauge from the widget browser, add it to the page and select it to view its properties.
Set the minimum and maximum properties to the limits for the gauge (in your case 20 and 40.)
Click the bind button next to the value field and choose direct binding, then enter the name of your datapoint in the expression editor. This will bind the displayed value to your datapoint.

Sliders are used in exactly the same way, except that you choose a datapoint to display and set, instead of entering a value to display.

For a 3-state switch you can use the same trick - set the minimum and maximum values on the switch to 0 and 2, then either have three buttons that set the value of the datapoint to 0, 1 and 2, or use a script on the click event for the switch to toggle between them.

I've prepared a quick demo mimic which you can view here:
https://www.whzan.com/viewer.aspx?MimicID=1010

or edit here to get an idea of how it works:
https://www.whzan.com/Editor.aspx?ReadOnlyView=1010

Please let me know if there's anything else I can do to help,

Ben.