Color Selector

gistfile1.html

<style>
  .spectrum {
    display: block;
    width: 150px;
    height: 15px;
    margin-left: 2px;
    background: -webkit-linear-gradient(left, hsl(0,100%,50%),hsl(60,100%, 50%), hsl(120,100%, 50%), hsl(180, 100%, 50%), hsl(240,100%,50%), hsl(300,100%,50%) 100%),
-moz-linear-gradient(left, hsl(0,100%,50%),hsl(60,100%, 50%), hsl(120,100%, 50%), hsl(180, 100%, 50%), hsl(240,100%,50%), hsl(300,100%,50%) 100%)
-o-linear-gradient(left, hsl(0,100%,50%),hsl(60,100%, 50%), hsl(120,100%, 50%), hsl(180, 100%, 50%), hsl(240,100%,50%), hsl(300,100%,50%) 100%); 
  }
  input[type=range] {
    width: 150px;
    margin-top: -5px;
  }
</style>
<span class="spectrum"></span>
<input type="range" min="0" max="300" step="1">

Why the switch from <span> to <meter>?

er, the other way 'round.

Because the value attribute must be specified, and that makes the solution much less simple.