v5.9.0
Slider range 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:
Method | Description |
---|---|
setValue( [ 19, 71 ] ) |
Set the value of the slider to a given number. |
getValue() |
Get the current values of the slider. An array with both values will be returned. |
setSettings({...}) |
Update the settings for the slider by providing an object of the new settings required. See the settings option table for further details. |
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%' ]
});
});
});
It is now possible to fully initialise a slider range 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 range was: (see the data attribute options table for further details on the values supported for each data attribute).
<fieldset class="m-form-row [ Modifier ]">
<legend class="a-label">...</legend>
<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="..." data-range-value-label="...">
<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><!-- or --><fieldset class="m-form-row [ Modifier ]">
<legend class="a-label">...</legend>
<div class="m-form-row__content">
<div class="m-form-affix m-form-affix--full-width">
<div class="m-form-affix__label-wrapper">
<!-- include prefix here -->
<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="..." data-range-value-label="...">
<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>
<!-- include suffix here -->
</div>
</div>
</div>
</fieldset>
Now the markup can be as follows:
<fieldset class="m-form-row [ Modifier ]">
<legend class="a-label">...</legend>
<div class="m-form-row__content">
<ul class="m-slider m-slider--range" id="...">
<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><!-- or --><fieldset class="m-form-row [ Modifier ]">
<legend class="a-label">...</legend>
<div class="m-form-row__content">
<div class="m-form-affix m-form-affix--full-width">
<div class="m-form-affix__label-wrapper">
<!-- include prefix here -->
<ul class="m-slider m-slider--range" id="...">
<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>
<!-- include suffix here -->
</div>
</div>
</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 : 1,
value : [ 10, 100 ],
ticks : [ 10, 30, 50, 70, 100 ],
ticksPositions : [ 0, 25, 50, 75, 100 ],
ticksLabels : [ '10%', '30%', '50%', '70%', '100%' ]
});
});
});
Data attribute options
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-ticks |
Yes | array |
Used to define the values of ticks. Tick marks are indicators to denote special values in the range, for example 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 |
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. To place ticks at 1, 50 and 100 on a range from 1 to 100, the values would be set to:
|
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:
To inlcude additional ticks but without corresponding text labels beneath, simply include a blank entry in the array eg.
|
data-range-format |
string |
Used to format the value displayed above the slider. eg. to display the selected value as a percentage
For a currency format it would be:
{d} is where the selected value will be inserted
|
|
data-range-value-label |
string |
Used to add a label above the input field or the value playback eg.
|
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
Aria role="group"
removed from fieldset
element as the role is already implied by the element itself.
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 range was updated to match with the new version of slider range component added to Framework.
data-range-value-label
option and m-slider--playback
modifer were added to extend the use of the of the slider range.
Dependency on jQuery removed.
v4.0.0
Separated from core styling to be an extension component.
.a-label
class now applied directly to the legend
tag (legends were wrapped with a span
tag).
<span class="a-label"><legend>...</legend></span>
has been replaced by:
<legend class="a-label">...</legend>
v3.0.0
Component added.