Slider range
Taxonomic name: M-SLIDER--RANGE
Beta v.2.1.0 - Updated 23/10/17.
Molecule
The slider range component is used to select start and end values from a range. It should be used where approximate rather than a precise values are required.
- Use a simple scale, with no more than 10 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 a pair of text boxes, or a pair of dropdowns for all screen sizes. Text boxes should be used unless the user must select from a list of values, in which case drop down lists 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
Errored slider
Disabled slider
Notes for developers
When using textboxes they must be of type number
and must have maxlength
, min
and max
attributes set.
When using dropdowns 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 | array | Default value. Will be overridden by the input values. data-range-value="[42,89]" |
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 |
Notes for testers
If a invalid value is input at small screen 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 - texbox input
<fieldset class="m-form-row m-form-row--light [ Modifier ]">
<span class="a-label"><legend>...</legend></span>
<div class="m-form-row__content">
<ul class="m-slider m-slider--range" 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="...">
<li class="m-slider__item">
<label class="m-slider__item-label" for="...">...</label>
<input type="number" id="..." name="..." class="a-textbox" maxlength="..." min="..." max="..." />
</li>
<li class="m-slider__item">
<label class="m-slider__item-label" for="...">...</label>
<input type="number" id="..." name="..." class="a-textbox" maxlength="..." min="..." max="..." />
</li>
</ul>
</div>
</fieldset>
Standard slider - dropdown input
<fieldset class="m-form-row m-form-row--light [ Modifier ]">
<span class="a-label"><legend>...</legend></span>
<div class="m-form-row__content">
<ul class="m-slider m-slider--range" 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="...">
<li class="m-slider__item">
<label class="m-slider__item-label" for="...">...</label>
<span class="a-dropdown">
<select class="a-dropdown__select" name="..." id="...">
<option value="...">...</option>
...
</select>
<span class="a-dropdown__ui"></span>
</span>
</li>
<li class="m-slider__item">
<label class="m-slider__item-label" for="...">...</label>
<span class="a-dropdown">
<select class="a-dropdown__select" name="..." id="...">
<option value="...">...</option>
...
</select>
<span class="a-dropdown__ui"></span>
</span>
</li>
</ul>
</div>
</fieldset>
Valid slider
<fieldset class="m-form-row m-form-row--light is-valid [ Modifier ]">
<span class="a-label"><legend>...</legend></span>
<div class="m-form-row__content">
<ul class="m-slider m-slider--range" 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="...">
<li class="m-slider__item">
<label class="m-slider__item-label" for="...">...</label>
<input type="number" id="..." name="..." class="a-textbox" maxlength="..." min="..." max="..." />
</li>
<li class="m-slider__item">
<label class="m-slider__item-label" for="...">...</label>
<input type="number" id="..." name="..." class="a-textbox" maxlength="..." min="..." max="..." />
</li>
</ul>
</div>
</fieldset>
Errored slider
<fieldset class="m-form-row m-form-row--light is-error [ Modifier ]">
<span class="a-label"><legend>...</legend></span>
<div class="m-form-row__content">
<p class="m-form-row__validation-message">...</p>
<ul class="m-slider m-slider--range" 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="...">
<li class="m-slider__item">
<label class="m-slider__item-label" for="...">...</label>
<input type="number" id="..." name="..." class="a-textbox" maxlength="..." min="..." max="..." />
</li>
<li class="m-slider__item">
<label class="m-slider__item-label" for="...">...</label>
<input type="number" id="..." name="..." class="a-textbox" maxlength="..." min="..." max="..." />
</li>
</ul>
</div>
</fieldset>
Disabled slider
<fieldset class="m-form-row m-form-row--light is-disabled [ Modifier ]">
<span class="a-label"><legend>...</legend></span>
<div class="m-form-row__content">
<p class="m-form-row__error-message">...</p>
<ul class="m-slider m-slider--range" 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="...">
<li class="m-slider__item">
<label class="m-slider__item-label" for="...">...</label>
<input type="number" id="..." name="..." class="a-textbox" maxlength="..." min="..." max="..." disabled />
</li>
<li class="m-slider__item">
<label class="m-slider__item-label" for="...">...</label>
<input type="number" id="..." name="..." class="a-textbox" maxlength="..." min="..." max="..." disabled />
</li>
</ul>
</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--range |
Modifier to for range slider variant | Yes | .m-slider |
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