The user interface of Windows Store applications - Build Windows 8 Apps with HTML5 and JavaScript - page 136

Setting the task priority
The task priority is expressed as a number that ranges from one (very low) to five (very high). You can
have users just type the number in a text box. This would simply require an input field. In Windows 8,
you can use one of new input types introduced by HTML5. The hosting environment will then
automatically render that as a touch-enabled slider. The following markup is all you need. This markup
fills the second section of your input form.
<div class="form-section">
<div class="block-element">
<h3>PRIORITY (1=VERY LOW - 5=VERY HIGH)</h3>
<input id="taskPriority" type="range"
data-win-bind="value: priority; min: minPriority; max: maxPriority"
</div>
</div>
The type attribute on the input element set to the range string does the magic of giving your users
a nice slider. The initial value of the slider, as well as its minimum and maximum values, is set via data
binding. You'll see more on data binding in a moment.
Setting the task status
The third section of the form contains information about the current status of the task. The status is
expressed with a string picked up from a drop-down list. In addition, you can indicate the percentage
of work already done in a numeric input field. Here's the markup you need:
<div class="form-section">
<div class="block-element">
<h3>STATUS</h3>
<select id="taskStatus">
<option>Not Started</option>
<option>In progress</option>
<option>Completed</option>
</select>
</div>
<div class="block-element">
<h3>% COMPLETED</h3>
<input id="taskPercCompleted" type="number" min="0" max="100"
data-win-bind="value: percCompleted" />
</div>
</div>
Windows 8 doesn't offer any special facilities for a drop-down list. The plain select HTML element
works just fine. By setting the type attribute of the input element to number, you force the input
box to only accept numbers. Note, though, that Windows 8 still allows you to type non-numeric
characters—except that they are discarded when the actual value is read back for further processing.