ARIA Example: Horizontal Sliders using aria-valuenow

Color Picker Using Slider Widgets

This example page needs updates as described in issue 229.

Change sliders to update the background color of box (note: the box is visually left of the 3 slider controls), with the HEX color value in a form control.

Horizontal Sliders

Red
100
Green
100
Blue
100

Color Box

Keyboard Support

Key Function
Right and Up Arrow Increase slide value by increment value
Left and Down Arrow Decrease slide value by increment value
Page Up Arrow Increase slide value by jump value
Page Down Arrow Decrease slide value by jump value
Home Set slider to minimum value
End Set slider to maximum value

ARIA Roles, Properties and States

Role Property/State Component Usage
slider thumb Identify the widget as a slider
aria-valuemax thumb Maximum value of the slider
aria-valuemin thumb Minimum value of the slider
aria-valuenow thumb Current value of the slider
aria-labelledby thumb Reference to define a unique descriptive accessible name for each slider widget

Source Code


<div id="example1"
   class="example"
   role="region"
   aria-labelledby="example1_h2">
  <div id="idSliders">
    <div id="idRed" class="label">
      Red
    </div>
    <div class="aria-widget-slider">
      <div class="rail" style="width: 300px">
        <div id="idRedValue"
           role="slider"
           class="thumb"
           aria-valuemin="0"
           aria-valuenow="100"
           aria-valuemax="255"
           aria-labelledby="idRed">
      </div>
      <div class="value">
        0
      </div>
    </div>
    <div id="idGreen" class="label">
      Green
    </div>
    <div class="aria-widget-slider">
      <div class="rail" style="width: 300px">
        <div id="idGreenValue"
           role="slider"
           class="thumb"
           aria-valuemin="0"
           aria-valuenow="100"
           aria-valuemax="255"
           aria-labelledby="idGreen">
      </div>
      <div class="value">
        0
      </div>
    </div>
    <div id="idBlue" class="label">
      Blue
    </div>
    <div class="aria-widget-slider">
      <div class="rail" style="width: 300px">
        <div id="idBlueValue"
           role="slider"
           class="thumb"
           aria-valuemin="0"
           aria-valuenow="100"
           aria-valuemax="255"
           aria-labelledby="idBlue">
      </div>
      <div class="value">
        0
      </div>
    </div>
  </div>
  <h2>
    Color Box
  </h2>
  <div id="idColorInfo">
    <div id="idColorBox">
    <label>
      Color (HEX):
      <input type="text"
           readonly=""
           id="idColorValueHex"
           value="">
    </label>
    <label>
      Color (RGB):
      <input type="text"
           readonly=""
           id="idColorValueRGB"
           value="">
    </label>
  </div>
</div>