Slider range

Taxonomic name: M-SLIDER--RANGE

Beta v.2.1.0 - Updated 23/10/17.

Molecule

Design
Code

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

Range input between 1 and 100

Minimum
Maximum

Standard slider - dropdown input

How much are you willing to spend on a meal out for two?

1st set
2nd set

Slider with formatted number

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

Minimum
Maximum

Valid slider

Range input between 1 and 100

This is a valid option

Minimum
Maximum

Errored slider

Range input between 1 and 100

Please enter a valid option

Minimum
Maximum

Disabled slider

Range input between 1 and 100

Please enter a valid option

Minimum
Maximum

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

Range input between 1 and 100

Minimum
Maximum

<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" min="..." max="..." />
			</li>
			<li class="m-slider__item">
				<label class="m-slider__item-label" for="...">...</label>
				<input type="number" id="..." name="..." class="a-textbox" min="..." max="..." />
			</li>
		</ul>
	</div>
</fieldset>

Standard slider - dropdown input

How much are you willing to spend on a meal out for two?

1st set
2nd set

<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

Range input between 1 and 100

This is a valid option

Minimum
Maximum

<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" min="..." max="..." />
			</li>
			<li class="m-slider__item">
				<label class="m-slider__item-label" for="...">...</label>
				<input type="number" id="..." name="..." class="a-textbox" min="..." max="..." />
			</li>
		</ul>
	</div>
</fieldset>

Errored slider

Range input between 1 and 100

Please enter a valid option

Minimum
Maximum

<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" min="..." max="..." />
			</li>
			<li class="m-slider__item">
				<label class="m-slider__item-label" for="...">...</label>
				<input type="number" id="..." name="..." class="a-textbox" min="..." max="..." />
			</li>
		</ul>
	</div>
</fieldset>

Disabled slider

Range input between 1 and 100

Please enter a valid option

Minimum
Maximum

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