====== 2.3.4. Sliders ======

===== Purpose =====

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.

===== Basic HTML code =====

The basic HTML code uses a standard HTML5 slider:

<code html>
<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>
</code>

<note attention>**Warning**
It is very important to indicate the format of data required from the user.

If HTML5 is not supported by the user’s browser, and if JavaScript is not activated, a text field will be displayed by default. Without instructions, the user will not know the range of authorized values. 
</note>

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

===== Behaviour with JavaScript =====

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

Essentially, the method consists of the following steps:
  - The standard slider is hidden in JavaScript.
  - 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.
  - 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.
  - 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:

<code html>
<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>
</code>

===== Demonstration =====

  * [[http://wet-boew.github.io/wet-boew/demos/slider/slider-en.html|Online slider controls demonstration, by Web Experience Toolkit (WET) project]].