Slider

Taxonomic name: M-SLIDER

Extension: FORMS-EXTENDED-B

v.4.0.0 - Updated 20/07/18. Archives

Molecule

Design
Code

The slider component is used to select a value from a range. It should be used where an approximate rather than a precise value is required.

Use a simple scale, with no more than ten points, as anything more than this make it difficult for users to hit their intended target.
Incremental values along the scale should be displayed above the slider, so that they are not obscured when in use on a mobile or tablet screen.
When JavaScript is not available, slider will fall back to text box, or dropdown for all screen sizes. Text box should be used unless the user must select from a list of values, in which case a drop down should be used as the fall back solution.

Do not use where a precise value or more complicated scale is required, as sliders can be difficult to interact with, especially at smaller screen sizes; in those instances, an alternative control should be used.

Examples

Standard slider - texbox input

Range input between 1 and 100

Standard slider - dropdown input

Range input between 1 and 100

Slider with formatted number

What percentage of your salary do you want to pay into your pension?

Valid slider

Range input between 1 and 100

This is a valid option

Errored slider

Range input between 1 and 100

Please enter a valid option

Disabled slider

Range input between 1 and 100

Notes for developers

When using a textbox it must be of type number and must have maxlength, min and max attributes set.

When using a dropdown all options must have values which are valid floats.

Attribute	Required	Type	Description
`data-range-min`	Yes	float	Minimum possible value
`data-range-max`	Yes	float	Maximum possible value
`data-range-step`	Yes	float	Increment step
`data-range-value`	Yes	float	Default value. Will be overridden by the input value
`data-range-ticks`	Yes	array	Used to define the values of ticks. Tick marks are indicators to denote special values in the range. eg. to place ticks at 1, 50 and 100 on a range from 1 to 100 the value would be set to `data-range-ticks="[1,50,100]"`
`data-range-ticks-positions`	Yes	array	Used to define the positions of the tick values in percentages. The first value should always be 0, the last value should always be 100 percent. eg. to place ticks at 1, 50 and 100 on a range from 1 to 100 the value would be set to `data-range-ticks-positions="[0,50,100]"`
`data-range-ticks-labels`	Yes	array	Defines the labels above the tick marks. Accepts HTML input. eg. to place tick labels £1, £50 and £100 on a range from 1 to 100 the value would be set to `data-range-ticks-labels="["£1","£50","£100"]"`.
`data-range-format`		string	Used to format the value displayed above the slider. eg. to display the selected value as a percentage `data-range-format="{d}%"`, for a currency format it would be `data-range-format="£{d}"`. `{d}` is where the selected value will be inserted

Important messages

To help those using assistive technologies, make sure that success/error messages which need to be announced to users have their aria attributes updated to role="alert" and/or aria-live="assertive".

Using autocomplete

Users appreciate when websites save them time by automatically filling common fields like names, email addresses and other frequently used fields, plus it helps to reduce potential input errors, especially on virtual keyboards and small devices.

Browsers use many methods to determine which fields they can auto-populate based on previously specified data by the user, and you can give hints to the browser by providing both the name attribute and the autocomplete attribute on each input element.

Further details can be found in the developer notes on the form introduction page.

Extension component

This component forms part of the 'forms-extended-b' extension and so requires additional stylesheets to be loaded in order to be used; include the following code in the header of your page to attach the relevant additional stylesheets:

<!--[if !IE | gt IE 8]><!-->
	<link media="all" href="[ CDN Folder Path ]/css/customer/forms-extended-b.css" rel="stylesheet" />
<!--<![endif]-->
<!--[if lte IE 8]>
	<link media="all" href="[ CDN Folder Path ]/css/customer/forms-extended-b-unmq.css" rel="stylesheet" />
<![endif]-->

Notes for testers

If an invalid value is input at small screen size, it will automatically be converted to a value within range when the slider is shown at either medium or large screen.
Ensure that all form fields have a correctly associated label; this not only provides context to each field for assistive technology users, but also a larger clickable area to select the field. Clicking / pressing on a label for a single input field should cause the input to gain focus.
When JavaScript is not available, the slider will fall back to either a textbox or dropdown (as displayed at small screen with JavaScript) for all screen sizes.

Code Examples

Standard slider - textbox input

What percentage of your salary do you want to pay into your pension?

<fieldset class="m-form-row [ Modifier ]">
	<label class="a-label" for="..." >...</label>
	<div class="m-form-row__content">
		<input type="number" id="..." name="..." class="a-textbox m-slider" maxlength="..." min="..." max="..." data-module="m-slider" data-range-min="..." data-range-max="..." data-range-step="..." data-range-value="..." data-range-ticks="..." data-range-ticks-positions="..." data-range-ticks-labels="..." data-range-format="..." />
	</div>
</fieldset>

Standard slider - dropdown input

Range input between 1 and 100

<fieldset class="m-form-row [ Modifier ]">
	<label class="a-label" for="..." >...</label>
	<div class="m-form-row__content">
		<span class="a-dropdown m-slider" data-module="m-slider" data-range-min="..." data-range-max="..." data-range-step="..." data-range-value="..." data-range-ticks="..." data-range-ticks-positions="..." data-range-ticks-labels="..."  data-range-format="...">
			<select class="a-dropdown__select" name="..." id="...">
				<option value="...">...</option>
				...
			</select>
			<span class="a-dropdown__ui"></span>
		</span>
	</div>
</fieldset>

Valid slider

Range input between 1 and 100

This is a valid option

<fieldset class="m-form-row is-valid [ Modifier ]">
	<label class="a-label" for="..." >...</label>
	<div class="m-form-row__content">
		<p class="m-form-row__validation-message">...</p>
		<input type="number" id="..." name="..." class="a-textbox m-slider" maxlength="..." min="..." max="..." data-module="m-slider" data-range-min="..." data-range-max="..." data-range-step="..." data-range-value="..." data-range-ticks="..." data-range-ticks-positions="..." data-range-ticks-labels="..." data-range-format="..." aria-invalid="false" />
	</div>
</fieldset>

Errored slider

Range input between 1 and 100

Please enter a valid option

<fieldset class="m-form-row is-error [ Modifier ]">
	<label class="a-label" for="..." >...</label>
	<div class="m-form-row__content">
		<p class="m-form-row__error-message">...</p>
		<input type="number" id="..." name="..." class="a-textbox m-slider" maxlength="..." min="..." max="..." data-module="m-slider" data-range-min="..." data-range-max="..." data-range-step="..." data-range-value="..." data-range-ticks="..." data-range-ticks-positions="..." data-range-ticks-labels="..." data-range-format="..." aria-invalid="true" />
	</div>
</fieldset>

Disabled slider

Range input between 1 and 100

<fieldset class="m-form-row is-disabled [ Modifier ]">
	<label class="a-label" for="..." >...</label>
	<div class="m-form-row__content">
		<input type="number" id="..." name="..." class="a-textbox m-slider" maxlength="..." min="..." max="..." data-module="m-slider" data-range-min="..." data-range-max="..." data-range-step="..." data-range-value="..." data-range-ticks="..." data-range-ticks-positions="..." data-range-ticks-labels="..." data-range-format="..." disabled />
	</div>
</fieldset>

Required slider

<fieldset class="m-form-row [ Modifier ]">
	<label class="a-label" for="..." >...</label>
	<div class="m-form-row__content">
		<input type="number" id="..." name="..." class="a-textbox m-slider" maxlength="..." min="..." max="..." data-module="m-slider" data-range-min="..." data-range-max="..." data-range-step="..." data-range-value="..." data-range-ticks="..." data-range-ticks-positions="..." data-range-ticks-labels="..." data-range-format="..." aria-required="true" />
	</div>
</fieldset>

<!-- or -->

<fieldset class="m-form-row [ Modifier ]">
	<label class="a-label" for="..." >...</label>
	<div class="m-form-row__content">
		<span class="a-dropdown m-slider" data-module="m-slider" data-range-min="..." data-range-max="..." data-range-step="..." data-range-value="..." data-range-ticks="..." data-range-ticks-positions="..." data-range-ticks-labels="..."  data-range-format="...">
			<select class="a-dropdown__select" name="..." id="..." aria-required="true">
				<option value="...">...</option>
				...
			</select>
			<span class="a-dropdown__ui"></span>
		</span>
	</div>
</fieldset>

Classes overview

The following table gives you a quick overview of the CSS classes that can be applied.

Class	Outcome	Required	Applied to	Comments
`.m-slider`	Base style for a single value slider	Yes	`.a-dropdown` `.a-textbox`

Keyboard operations

TAB: Tabbing to an input field should make the input clearly visually different so that the focus point on the page is obvious to the user.
ARROW KEYS: When the slider is visible and has focus the selected value can be increased or decreased.