Slider

Taxonomic name: M-SLIDER

Extension: FORMS-EXTENDED-B

v.4.14.0 - Updated 11/10/19. Archives

Molecule

The slider component is used to select a value from a range.

Structure

  • Consists of slider track and slider fill (corresponds to selection made)
  • Slider track guides (ticks) - to mark pre-determined values (up to 7 maximum permitted)

  • Labels - Up to 3 labels can be included as markers for the slider:

    • Starting value
    • Middle value
    • End value

    These can be a combination of numerical and/or characters. For values from 1 million and above, revert to alphanumeric labels eg. 1mil, 2mill, 20mil etc

  • Slider container (required for all variants)
  • Value label: It is recommended that a value label is included to sit above the input or replay value (when JavaScript is present) to better signpost the currently selected value. The suggested text for this is 'amount', but can be set to what is appropriate for the particular input.
  • Prefix/suffix: It is recommended to include a prefix or suffix symbol whenever appropriate eg. currency symbol, % etc. These will sit beside the input or the replay value.

Notifications and errors

  • Form errors for the slider must be placed below the form label and any help/explanatory text and above the slider container.

Accessibility and screen readers

  • Only permitted on following background colours: White #FFFFFF

Non-JS requirements and considerations

  • Will fall back to textbox, or dropdown for all screen sizes. Textbox 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.

Placement

  • Recommended to be left aligned

Design anatomy

  • Layout:

    • Desktop: 7 columns
    • Tablet: 7 columns
    • Mobile: 4 columns

Examples

Standard slider

For use where more complex values and ranges are expected.

Slider with formatted number

Slider with inline input

Recommended for use where there are severe screen estate contraints.

Can only be used with textbox input.

Design anatomy

The input with optional label is aligned to the left of the slider (at desktop and tablet where the slider where space allows). The area for the input and optional label is 140px wide and the slider and a minimum width of 200px.

Slider with inline playback

For use with a maximum of 10 selectable values, to ensure that users with motor difficulties can still select values using the slider.

The playback value can contain upto 10 characters eg. £999999

Design anatomy

The replay value with optional label is aligned to the left of the slider (at desktop and tablet where the slider where space allows). The area for the replay value and optional label is 140px wide and the slider and a minimum width of 200px.

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"]". To inlcude additional ticks but without corresponding text labels beneath simply inlude a blank entry in the array eg. data-range-ticks-labels="["£1","","£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
data-range-value-label   string Used to add a label above the input field or the value playback eg. data-range-format="Amount"

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, it will automatically be converted to a value within range.
  • 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 for all screen sizes.
  • IE9 and IE10 do not support the inline input or replay value at desktop or tablet, instead they display in the stacked mobile layout.

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 [ Modifiers ]" 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="..." data-range-value-label="..." />
	</div>
</fieldset>

<!-- or with affix -->

<fieldset class="m-form-row [ Modifier ]">
	<label class="a-label" for="..." >...</label>
	<div class="m-form-row__content">
		<div class="m-form-affix">
			<div class="m-form-affix__label-wrapper">
				<!-- include prefix here -->
				<input type="number" id="..." name="..." class="a-textbox m-slider [ Modifiers ]" 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="..." data-range-value-label="..." />
				<!-- include suffix here -->
			</div>
		</div>
	</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 [ Modifiers ]" 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="..." data-range-value-label="...">
			<select class="a-dropdown__select" name="..." id="...">
				<option value="...">...</option>
				...
			</select>
			<span class="a-dropdown__ui"></span>
		</span>
	</div>
</fieldset>

<!-- or with affix -->

<fieldset class="m-form-row [ Modifier ]">
	<label class="a-label" for="..." >...</label>
	<div class="m-form-row__content">
		<div class="m-form-affix">
			<div class="m-form-affix__label-wrapper">
				<!-- include prefix here -->
				<span class="a-dropdown m-slider" data-module="m-slider [ Modifiers ]" 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="..." data-range-value-label="...">
					<select class="a-dropdown__select" name="..." id="...">
						<option value="...">...</option>
						...
					</select>
					<span class="a-dropdown__ui"></span>
				</span>
				<!-- include suffix here -->
			</div>
		</div>
	</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 [ Modifiers ]" 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="..." data-range-value-label="..." 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 [ Modifiers ]" 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="..." data-range-value-label="..." 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 [ Modifiers ]" 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="..." data-range-value-label="..." 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 [ Modifiers ]" 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="..." data-range-value-label="..." 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 [ Modifiers ]" 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="..." data-range-value-label="...">
			<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 		 
.m-slider--inline Modifer to place the input to the left of the slider at tablet and desktop (when it is able to fit)   .m-slider Only supported for textboxes, this styling will not be applied when using dropdowns
.m-slider--playback Modifier to hide the textbox or dropdown and just replay the selected value   .m-slider Only for use where there are a maximum of 10 selectable values to ensure the slider is still usable for users with motor difficulties

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.