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