First, insert the slider element into a formula field. See the code for this below:
html("<input type='range' min='0' max='100' value='50'>")
The input element is a self-closing tag; ie. we can omit the closing tag in the form of </input> for this element (adding the closing tag will still work). You can see that we have specified three attributes to the element. The “type” attribute specifies that this element will be a slider or “range” input element, while the min and max attributes specify the minimum and maximum values for the range. The “value” attribute sets the starting position for the slider. If you save a formula field with the above code you will see something like the following (the slider may look different for you based on your browser and OS):
html(" <div id='my_slider_val'>50</div> <input type='range' min='0' max='100' value='50' oninput=' let sliderVal = getElementById(""my_slider_val""); let slider = event.target sliderVal.innerHTML = slider.value; ' > ")
The second line then changes the contents of the div element to the “value” of the input element. We can access attributes of an HTML element by reading the properties of its DOM object. Here we get the “value” attribute of the input element, which stores the current value of the slider, with “slider.value”. the value of the slider is assigned to a property of “sliderVal” called “innerHTML”. This property can be used to read or write the contents of an HTML element.
Running this code will give the following result: (In the example below the following adjustments have been made to the formula field: style > background color is set to white, style > Text align is set to center, Label Position is set to hidden, and the field has been expanded to show all the contents)
Now we have a functioning slider, and we can see the numeric value! At this point, the slider has no memory and does not communicate with Ninox. Next week we will see how we can establish communication between Ninox and this slider (or any HTML).