UI Schema

Visual Effects

Meters

20 60 100
<meter value="20" min="0" low="33" high="66" optimum="100" max="100" title="20">20</meter>
<meter value="60" min="0" low="33" high="66" optimum="100" max="100" title="60">60</meter>
<meter value="100" min="0" low="33" high="66" optimum="100" max="100" title="100">100</meter>

Progress Bars

all completed 80% completed 60% completed 40% completed 20% completed no value
<progress value="100" max="100" title="100%">all completed</progress>
<progress class="ui-progress-success" value="80" max="100" title="80%">80% completed</progress>
<progress class="ui-progress-info" value="60" max="100" title="60%">60% completed</progress>
<progress class="ui-progress-warning ui-progress-striped" value="40" max="100" title="40%">40% completed</progress>
<progress class="ui-progress-danger ui-progress-striped" value="20%" max="100" title="20%">20% completed</progress>
<progress max="100" title="no value">no value</progress>

Range Sliders

<input type="range" min="0" max="100" step="1" value="60" aria-valuemin="0" aria-valuemax="100" aria-valuenow="60">

Audio

<audio controls>
  <source src="https://upload.wikimedia.org/wikipedia/en/8/82/Someone_Like_You.ogg" type="audio/ogg">
  <span class="ui-color-danger">Your browser does not support the <code>audio</code> element.</span>
</audio>

Video

<video controls>
  <source src="https://upload.wikimedia.org/wikipedia/commons/c/c0/Big_Buck_Bunny_4K.webm" type="video/webm">
  <span class="ui-color-danger">Your browser does not support the <code>video</code> element.</span>
</video>