Slider

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.

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.

Setting options

Required options must be set when initilising the component.

ticks : [ 1, 50, 100 ]

ticksPositions : [ 0, 50, 100 ]

ticksLabels : [ '£1', '£50' ,'£100' ]

ticksLabels : [ '£1', '', '£100' ]

format : '{d}%'

format : '£{d}'

valueLabel : 'Amount'

Intitilising the slider component

From v5.9.0 it is recommended that the slider is initilised via JavaScript to simplify markup and reduce chance of markup errors. This is achieved using the following JavaScript code:

document.addEventListener( 'frameworkready', function () {
	FRAMEWORK.require([ 'blocks/m-slider' ], function ( mSliderModule ) {
		var mSliderEl = document.querySelector( '#sliderId' ),
			mSliderInstance = mSliderModule.initInstance( mSliderEl, {
				min : 10,
				max : 100,
				step : 10,
				value : 1,
				ticks : [ 10, 30, 50, 70, 100 ],
				ticksPositions : [ 0, 25, 50, 75, 100 ],
				ticksLabels : [ '10%', '30%', '50%', '70%', '100%' ]
			});
	});
});

Prior to v5.9.0 these initial setup values had to be provided using data attributes on the element itself. See the slider archive page for further details.

Controling the slider component programatically

Slider can be controlled programatically to get and set the values of the slider, as well as to update the slider's settings. The following methods are available for use:

For example:

document.addEventListener( 'frameworkready', function () {
	FRAMEWORK.require([ 'blocks/m-slider' ], function ( mSliderModule ) {
		var mSliderEl = document.querySelector( '#sliderId' ),
			mSliderInstance = mSliderModule.initInstance( mSliderEl );		mSliderInstance.setSettings({
			ticks : [ 10, 30, 50, 70, 100 ],
			ticksPositions : [ 0, 25, 50, 75, 100 ],
			ticksLabels : [ '10%', '30%', '50%', '70%', '100%' ]
		});
	});
});

When disabling form elements, do not solely rely on the is-disabled class, but ensure that the disabled attribute is also set on the relevant form element or input. If an entire set of form elements is to be disabled, the is-disabled class and disabled attribute should be added directly to the fieldset instead, and not to each individual element within it. However if only one element from the set is disabled, then the class and attribute should be applied to that element only.

Aria usage for errors and help text

To aid screen reader users in completing forms without error and also with understanding and fixing any errors that have occured, some additional aria attributes are now recommended to be applied across all form fields/rows.

All form row help, explanatory text, form row instructions and form row errors must have a unique id assigned to them and be appropriately linked to either the individual form input or the form row using aria-describedby. This ensures that the help text is read out immediately on focus of the form input/fieldset. When there is more that one item that requires referencing within the aria-describedby attribute the id values must be supplied in the form of a space separated list. For example if there is an error with id of 'err1' and help text with id of 'help1' the value for the aria-describedby attribute would be 'err1 help1'.

All inline form error messages should start with the hidden text 'Error: ' so that when read by out by a screen reader it is immediately clear that the text being read is an error message.

All erroring form fields (or fieldset if a group or radios/checkboxes) must have aria-invalid="true" set on them, ensuring that when a user focus' on an errored form field, the field will be announced as invalid, so the user is then aware that there in an issue that requires fixing.

When linking help or errors, or even adding aria-invalid to the markup careful consideration must be taken as to where it is most appropriate to apply the value. The following rules should be used to decide where the attribute(s) should be applied.

• Single form field - All attributes should be applied directly to that form field
• Group of form fields but only one in error or help text applies to only one - Apply the attribute(s) to the only field in error or where the help text applies
• Group of form field where all in error or the help text applies to all - Apply the attribute(s) to the groups surrounding fieldset (form row)

There may situations where more than one of these rules applies to the overall form row for example a date range where the instruction text applies to both fields so should be linked to the fieldset for the date range but one of the two fields is in error so the error should be linked to just that field not to the fieldset.

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 an additional stylesheet to be loaded in order to be used; include the following code in the header of your page to attach the relevant additional stylesheet:

<link media="all" href="./assets/[ theme type ]/[ release version ]/[ organisation ]/[ theme name ]/css/forms-extended-b.css" rel="stylesheet" />

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.

Classes overview

The following table gives you a quick overview of the CSS classes that can be applied.

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.