Adding sliders (HTML)

[ This article is for Windows 8.x and Windows Phone 8.x developers writing Windows Runtime apps. If you’re developing for Windows 10, see the latest documentation ]

Use sliders to let users pick a value within a continuous range.

This illustration shows a slider with a current value of 61. The indicator at 61 is called the "thumb." When users tap the thumb, the value is shown in a tooltip. When users tap the continuum track, the thumb jumps to that location on the track.

Tick marks Tick marks show when the slider is not set to allow continuous, float-point granular input. Tick marks are always snap points that the thumb snaps to, but they may not represent all of the snap points. For example, a 100-step slider shouldn't show 100 tick marks if the width is only 200px; the tick marks look too crowded. If the distance between two tick marks is less than 19px, one of them should be skipped for rendering.

The default position is above the track in horizontal style and to the left of the track in vertical style. You can override the "display:none" CSS property to make them show up on the other side or both sides.

You can also hide tick marks by setting "color:transparent", and still keep the region where tick marks are supposed to be displayed.

Granularity control The size and distance of arrows on the track during press down indicates the granularity of the slider movement. The further that the user drags away from the thumb, the slower the thumb moves compared to the finger.