Slider

v5.9.0

Slider can now 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({
			format : '{d}%',
			step : 5,
			ticks : [ 1, 25, 50, 75, 100 ],
			ticksPositions : [ 0, 25, 50, 75, 100 ],
			ticksLabels : [ '1%', '25%', '50%', '75%', '100%' ]
		});
	});
});

It is now possible to fully initialise a slider using JavaScript and not with the setting or data attributes. This can make code clearer and reduce the chance of markup errors, in particular when providing the array of tick labels.

Previously, the markup to to initialise a slider was: (see the data attribute options table for further details on the values supported for each data attribute)..

<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 --><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="..." data-range-value-label="...">
			<select class="a-dropdown__select" name="..." id="...">
				<option value="...">...</option>
				...
			</select>
			<span class="a-dropdown__ui"></span>
		</span>
	</div>
</fieldset>

Now the markup can be as follows:

<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="..." />
	</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 ]" id="...">
			<select class="a-dropdown__select" name="..." id="...">
				<option value="...">...</option>
				...
			</select>
			<span class="a-dropdown__ui"></span>
		</span>
	</div>
</fieldset>

With appropriate accompanying JavaScript similar to the following:

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%' ]
			});
	});
});

Data attribute options

data-range-ticks="[1,50,100]"

data-range-ticks-positions="[0,50,100]"

data-range-ticks-labels="["£1","£50","£100"]"

data-range-ticks-labels="["£1","","£100"]"

data-range-format="{d}%"

data-range-format="£{d}"

data-range-value-label="Amount"

Fixed issue where inline playback variant was not displaying the playback at all.

v5.5.0

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

v5.4.0

The background colour of any inputs when placed onto any background apart from white has been updated from #f9f9f9 to #fff in order to maintain colour consistency between form elements.

The border colour for any inputs, slider handle and ticks have been updated from #aaa to #737373 in order to meet the minimum contrast ratio of 3:1 for non-text elements.

The track colour has been updated from #eee to #ccc in order to increase its colour contrast.

v5.0.0

The paths and browser support requirements for the extension 'forms-extended-b' have been updated as part of v5. The paths/code required prior to v5 was:

<!--[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]-->

v4.14.0

Support and use of the new form affix component added.

v4.13.0

Styling of the slider was updated to match with the new version of slider component added to Framework.

data-range-value-label option, m-slider--inline and m-slider--playback modifers were added to extend the use of the of the slider.

Dependency on jQuery removed.

v4.0.0

Separated from core styling to be an extension component.

v3.0.0

Component added.