Design Pattern Library 1.5

General Guidelines

Desktop/Web

Mobile (Tablet & Phone)

Visual Design Guidelines

Sliders

Problem

The user needs to set a value from a continuous range of data. The user can make a choice throughout a wide range of allowed values.

Solution

A slider control is used to set a value from a continuous range of data such as volume or brightness levels. The slider has a minimum and a maximum increment value. Sliders are not used for discrete choices. The slider can be used either horizontal or vertical, but horizontal is recommended. Labels can be put at the two ends of the slider, but are occasionally also used in between. It is not recommended to use a horizontal slider inside a panorama or pivot, since the screen interaction to move the slider is the same as moving through the panorama or pivot. However, it is possible to disable the panorama/pivot gesture. Tick marks, like snap points and a grabber, are optional.

Code

HTML code here
	
CSS code here
	

Examples