Slider

Taxonomic name: M-SLIDER

Extension: FORMS-EXTENDED-B

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

Molecule

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

Standard slider - dropdown input

Slider with formatted number

Valid slider

This is a valid option

Errored slider

Please enter a valid option

Disabled slider

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

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:

<link media="all" href="[ CDN Folder Path ]/css/customer/forms-extended-b.css" rel="stylesheet" />
<!--[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

<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

<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

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

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

<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.