2.3.4. Sliders

Sliders are form fields that let the user select a specific value within a range of predefined values. Normally, they are shown as a slider that can be moved along an axis, between the minimal value and a second value which is the maximum value.

Sometimes, you can move the slider anywhere on the scale; other times you have to choose one of the predefined values on the scale.

They are said to be “simulated” when they do not use the default form elements included in HTML, namely the <input type=“range” /> fields. They are often used because they are more attractive.

The basic HTML code uses a standard HTML5 slider:

<form action="index.html" method="post">
    <label for="sleep-quality" id="sleep-quality-label">
        Are you satisfied with the quality of your sleep?
        (whole number, from 1 for “Very dissatisfied” to 5 for “Very satisfied")
    </label>
    <input type="range" id="sleep-quality" name="sleep-quality" step="1" value="3" min="1" max="5" />
 
    <input type="submit" value="Submit information" />
</form>

Without JavaScript, a standard form is shown to the user.

With JavaScript, the behaviour of simulated sliders must the same as those of standard sliders.

Essentially, the method consists of the following steps:

1. The standard slider is hidden in JavaScript.
2. An empty container is created in the DOM, in the place of the initial slider. It will contain the other slider elements. When it has been styled with CSS, it will symbolize the axis of the slider.
3. A second empty element is created in the DOM as a child of the previous element. When styled in CSS, it will be used as the slider.
4. JavaScript is then used to add ARIA roles and manage the behaviour of the simulated slider.

Going into more detail, the scripts must handle the following points:

• The CSS property display: none; is applied to the <input type=“range” /> tags.
• An empty container is added in the DOM just after the <input type=“range” />. In the example, a <div> is used.
• An empty element is added in the DOM within the newly created container. In the example, a <span> is used. This is the slider.
• If the slider is not tabulable by default, the attribute value tabindex=“0” is applied to it.
• The attribute value role=“slider” is applied to the slider.
• The attribute aria-labelledby is applied to the slider. The value of this attribute is retrieved from the id attribute of the label corresponding to the slider.
• The attribute value aria-valuemin is applied to the slider. This attribute value corresponds to the minimum value authorized for the slider.
• The attribute value aria-valuemax is applied to the slider. This attribute value corresponds to the maximum value authorized for the slider.
• The attribute value aria-valuenow is applied to the slider. This attribute value corresponds to the current value of the slider. This attribute value is updated whenever the slider changes position.
• If required, the attribute aria-valuetext is applied to the slider. This attribute value corresponds to the current value of the cursor, but in a format adapted to the internet user. In our example, this attribute could, for example, have the value aria-valuetext=“Very satisfied” when the aria-valuenow=“5”. As it is more easily understood, it is the first value, if available, that will be shown to users of assistive devices. This attribute value is updated whenever the slider changes position.
• The slider cannot be positioned before the minimal value, or after the maximal value, on the axis.
• If steps are defined, the slider position must respect them. For example, if each step has a value of 1 unit, and the starting position is 10, it must not be possible to obtain a value that is not a whole number by using the slider.
• The slider can be moved along the axis, by dragging it with the mouse, or by dragging it with the finger.
• The slider can also be moved with the keyboard. When the focus is set on the slider:
  • La pression des touches “Flèche droit” ou “Flèche haut” augmente la valeur du slider, d’une valeur de pas.
  • Pressing the keys Right arrow or Up arrow increases the value of the slider by one step.
  • Pressing the Left arrow or Down arrow decreases the value of the slider by one step.
  • Pressing the Home key moves the slider to the minimal value of the slider.
  • Pressing the End key moves the slider to the maximal value.
  • Pressing the Page up key increases the value of the slider, by an arbitrary value, but by more than one step.
  • Pressing the Page down key decreases the value of the slider, by an arbitrary value more than one step, and equal to the amount by pressing on the Page up key.

The resulting code in JavaScript is as follows:

<form action="index.html" method="post">
    <label for="Sleep-quality" id="sleep-quality-label">
        Are you satisfied with the quality of your sleep?
        (Whole number, from 1 for “Very dissatisfied” to 5 for “Very satisfied")
    </label>
    <input style="display: none;" type="range" id="sleep-quality" name="sleep-quality" step="1" value="3" min="1" max="5" />
    <div id="slider-container">
        <span id="slider-cursor" role="slider" tabindex="0" aria-labelledby="sleep-quality-label" aria-valuemin="1" aria-valuemax="5" aria-valuenow="5" aria-valuetext="Very satisfied"></span>
    </div>
 
    <input type="submit" value="Submit information" />
</form>

• Online slider controls demonstration, by Web Experience Toolkit (WET) project.