To add a slider widget to your page, start with an input with a new HTML5 type="range" attribute. Specify the value (current value), min and max attribute values to configure the slider. The framework will parse these attributes to configure the slider.
input
type="range"
value
min
max
As you drag the slider, the input will update and vice-versa so they are always in sync so you can submit the slider value with form in a simple way. Set the for attribute of the label to match the ID of the input so they are semantically associated and wrap them in a div with the data-role="fieldcontain" attribute to group them.
for
label
div
data-role="fieldcontain"
<div data-role="fieldcontain"> <label for="slider">Input slider:</label> <input type="range" name="slider" id="slider" value="0" min="0" max="100" /> </div>
The slider and input is displayed like this: