Jauges & sliders

Jauge — trois tailles

data-size="s"
6

data-size="m"
8

data-size="l"
10

Slider — trois tailles

data-size="s"

data-size="m"

data-size="l"

désactivé

Teintes

défaut
ice-blue-600 → 400

data-tone="strong"
ice-blue-900 → 600

data-tone="live"
vivid-blue-600 → 400

data-tone="good"
vivid-turquoise-500 → vivid-green-300

data-tone="caution"
vivid-peach-400 → vivid-yellow-300

data-tone="danger"
ice-red-700 → 400

L’échelle se lit dans les deux sens

un score haut est bon

un score haut est mauvais

Balisage

<!-- lecture seule -->
<span class="ice-gauge" data-size="s" style="--value:.8"></span>

<!-- manipulable : la même jauge, plus un pouce et l’input natif -->
<label class="ice-slider">
  <input type="range" class="ice-slider__input" min="0" max="100" value="60">
  <span class="ice-gauge" data-size="m"></span>
  <span class="ice-slider__thumb"></span>
</label>