HTML : range

Representer graphiquement des intervalles en HTML.

Spécifications

[MIN|FROM-TO|MAX]
Syntaxe wiki pour la déclaration d'un intervalle.
[MIN|FROM1-TO1,FROM2-TO2|MAX]
Syntaxe wiki pour la déclaration d'un intervalle à plusieurs valeurs.
min ≤ from ≤ to ≤ max
Règles définissant les valeurs min, from, to et max.
<span class="range" aria-valuemin="0" aria-valuemax="10">
    <span class="value">
        <span class="from" aria-valuemin="0" aria-valuemax="7" aria-valuenow="3">3</span>
        <span class="to" aria-valuemin="3" aria-valuemax="10" aria-valuenow="7">7</span>
    </span>
</span>
Syntaxe HTML pour la déclaration d'un intervalle.

3 7

Rendu d'un intervalle.

API

Elément range

Nom
min
Description
Valeur minimum de l'intervalle.
type
double
default
0.0
Nom
max
Description
Valeur maximale de l'intervalle.
type
double
default
1
Nom
orientation
Description
Orientation de l'élément (vertical|horizontal).
type
string
default
horizontal
method
HTMLSpanElement addValue ( from , to )
Description
Ajouter une valeur d'intervalle.
param
int from Début de l'intervalle.
param
int to Fin de l'intervalle.
return
HTMLSpanElement Element valeur créé.
method
HTMLSpanElement getValue ( index )
Description
Récupérer la valeur à un index donné.
param
int index Index de la valeur.
return
HTMLSpanElement Element valeur
method
void setValue ( index , from , to )
Description
Définir la valeur d'intervalle à un index donné.
param
int index Index de la valeur.
param
int from Début de l'intervalle.
param
int to Fin de l'intervalle.

Element valeur

Nom
from
Description
Valeur de début de l'intervalle de valeurs.
type
double
Nom
to
Description
Valeur de fin de l'intervalle de valeurs.
type
double

Code

Contenu indisponible.
Code javascript.
/**
 *  range et meter
 *  ============================
 *  
 *  Pour une représentation d'un intervalle de valeur ou la représentation d'une valeur.
 *  
 *  ----
 *  °°stx-html°°
 *      <span class="range" aria-valuemin="0" aria-valuemax="10">
 *          <span class="value">
 *              <span class="from" aria-valuemin="0" aria-valuemax="7" aria-valuenow="3">3</span>
 *              <span class="to" aria-valuemin="3" aria-valuemax="10" aria-valuenow="7">7</span>
 *          </span>
 *      </span>
 *  ----
 *  Code HTML pour un .range
 *  
 *  ----
 *  °°stx-html°°
 *      <span class="meter">
 *          <span class="value">3/5</span>
 *          <meter value="3" min="0" max="5" aria-hidden="true">3/5</meter>
 *      </span>
 *  ----
 *  Code HTML pour .meter
 */

.meter,
.range {
    position: relative;
    display: inline-block;
    box-sizing: border-box;
    overflow: hidden;
/*    vertical-align: -0.2em;*/
/*    vertical-align: middle;*/
    border-width: 1px;
    border-style: solid;
    border-radius: 4px;
    padding: 0;
    height: 1rem;
    width: 5rem;
    max-width: 100%;
    /* typo */
    line-height: 1;
    /* colors */
    transition: all 0.1s;
    border-color: rgba(0, 0, 0, 0.2);
    background-color: rgba(0, 0, 0, 0.03);
/*    background-image: linear-gradient(#e6e6e6, #e6e6e6, #eee 20%, #ccc 45%, #ccc 55%);*/
    /*box-shadow: inset 2px 1px 5px rgba(0,0,0,0.3);*/
}

.meter > .value,
.range > .value {
    position: absolute;
    /* box */
    display: block;
    height: 100%;
    width: 0;
    overflow: hidden;
    /* typo */
    font-size: 0;
    line-height: 0;
    /* colors */
    transition: all 0.2s;
    background-color: var(--green-mid);
/*    background-image: linear-gradient(#ad7, #ad7, #cea 20%, #7a3 45%, #7a3 55%);*/
}

.meter > .optimum-value {
/*    background: linear-gradient(#ad7, #ad7, #cea 20%, #7a3 45%, #7a3 55%);*/
    background-color: var(--green-mid);
}
.meter > .sub-optimum-value {
/*  background: linear-gradient(#fe7, #fe7, #ffc 20%, #db3 45%, #db3 55%);*/
  background-color: var(--yellow-mid);
}
.meter > .even-less-good-value {
/*  background: linear-gradient(#f77, #f77, #fcc 20%, #d44 45%, #d44 55%);*/
  background-color: var(--red-mid);
}

/*

vertical range and vertical meter
---------------------------------
*/

.meter[aria-orientation="vertical"],
.range[aria-orientation="vertical"] {
    height: 5em;
    width: 1em;
    background-color: #7a3;
/*    background-image: linear-gradient(90deg, #e6e6e6, #e6e6e6, #eee 20%, #ccc 45%, #ccc 55%);*/
}

.meter[aria-orientation="vertical"] > .value,
.range[aria-orientation="vertical"] > .value {
    width: 100%;
    height: 0;
    background-color: #7a3;
/*    background-image: linear-gradient(90deg, #ad7, #ad7, #cea 20%, #7a3 45%, #7a3 55%);*/
}
.meter[aria-orientation="vertical"] > .value {
    bottom: 0;
}
/*
.meter[aria-orientation="vertical"] > .optimum-value {
  background: linear-gradient(90deg, #ad7, #ad7, #cea 20%, #7a3 45%, #7a3 55%);
}
.meter[aria-orientation="vertical"] > .sub-optimum-value {
  background: linear-gradient(90deg, #fe7, #fe7, #ffc 20%, #db3 45%, #db3 55%);
}
.meter[aria-orientation="vertical"] > .even-less-good-value {
  background: linear-gradient(90deg, #f77, #f77, #fcc 20%, #d44 45%, #d44 55%);
}
*/
/*

.meter specific : hide meter element
------------------------------------
*/

.meter > meter {
    display: none;
}

/*

.range specific : define from and to position
----------------------------------------------

TODO: styles for mouse interaction with from|to elements.

*/

.range > .value > span {
    position: absolute;
    top: 0;
    bottom: 0;
}
.range[aria-orientation="vertical"] > .value > span {
    left: 0;
    right: 0;
}
.range[aria-orientation="vertical"] > .value > .from {
    top: auto;
}
.range[aria-orientation="vertical"] > .value > .to {
    bottom: auto;
}
Code CSS.

Ressources et références

Titre
HTML 5
Auteurs
Ian HICKSON
Auteurs
Robin BERJON
Auteurs
Steve FAULKNER
Auteurs
Travis LEITHEAD
Auteurs
Erika DOYLE NAVARA
Auteurs
Edward O'CONNOR
Auteurs
Silvia PFEIFFER
Editeur
W3C
Date
Chapitre
4.10.15 The meter element
Titre
WAI-ARIA 1.0 Authoring Practices
Auteurs
  • Joseph SCHEUHAMMER
  • Michael COOPER
Editeur
W3C
Date
chapter
Slider (Multi-Thumb) (widget)