Navigating through multimedia content - Build Windows 8 Apps with HTML5 and JavaScript - page 162

Note WinJS provides the GestureRecognizer class to give you information about touch
manipulations being performed by the user. You can use this class to know about the
distance between start and final position of the fingers during a pinch movement. If the
distance is positive you zoom in; otherwise you zoom out.
Adding a slider to select the zoom level
A trick to set a zoom level on an image (but more in general on any zoomable content) that works
great on any sort of device is using a slider. The slider, in fact, can be easily manipulated through the
mouse and through the finger. To add a slider component to the detail page, you need the following
markup in details.html :
<section aria-label="Main content" role="main">
<input id="zoom-slider" type="range"
min="1" max="5" value="1" step="0.1" onchange="GalleryApp.zoomImage()" />
<bZoom level:</b
<span id="zoom-level">1</span>
<div id="zoomable-image-container">
<img id="zoomable-image" src="#" alt=""
data-win-bind="src: GalleryApp.DetailsPageModel.currentPhoto.imageUrl"
/>
</div>
</section>
The slider is given by an INPUT element with the type attribute set to range. The min and max
attributes indicate the range of values the user can select via the control. The step attribute indicates
the step of increment or decrement. As you are using the slider to set a zoom level, overall 1 and 5
form a good interval, and 0.1 as a step provides a pleasant experience.
By default, the WinJS slider displays a tooltip to give visual feedback of the value being set. For
some reason, the tooltip appears only for integer values. This forces you to introduce some other way
to let the user know about the zoom level being set. At the same time, you probably want to dismiss
tooltips in total. It only requires a small edit in details.css:
.details input[type=range]::-ms-tooltip {
display: none;
}
Note that the .details token in the style sheet expression indicates that tooltips are suppressed
only for slider components within an element marked with the details class. The details class is used to
mark only the body of the details.html page. You can cross-check this looking at the full source code
of the details.html page.