Meter and Range demo

A demo of Meter and Range

by Frank Taylor

HTML

<article class="meter graph">
        <h1>Meter</h1>
        <ul>
            <li><meter class="1" value="7" min="0" max="10" low="1" high="9">7 out of 10</meter></li>
            <li><meter class="2" value="3" min="0" max ="10" low="2" high="8">3 out of 10</meter></li>
        </ul>
    
<input class="1"type="range" name="grapherator1" min="0" max="10" /><input class="2" type="range" name="grapherator2" min="0" max="10" />
    </article>

    <label for="resize">Resize the bar graph</label>
        <input type="range" value="0" class="3" name="resize" min="1" max="2" step=".1" />

CSS

.graph{
    min-height: 10em;
    border: .0625em solid #777;
    min-width: 9em;
    margin: .5em;
    float:left;
    font-size: 1em;

}

.graph * {
    margin: .5em;
    -webkit-transition: all .3s ease-in;
    -moz-transition: all .3s ease-in;
    -o-transition: all .3s ease-in;
    transition: all .3s ease-in;
}
.graph h1{
    display:block;
    font-size: 1.15em;
    text-align: center;
    background: #ccc;
    margin: 0;
    border-bottom: .0625em solid #777;
    
}
.meter input[type="range"], meter{
    width: 5em;
    color: #9aa;
    background: #9aa;
}
meter{
    height:1em;
    margin: 0 1em;
    float:left;
    background: #459922;
    outline: none;
    color: blue;
    border:none;
    
}
ul.bar, article.bar input[type="range"]{
    width: 7em;
    margin: .5em auto;

}
ul.bar {
    height: 7em;
    border: .0625em solid #444;
        -webkit-transition: all .3s ease-in;
    -moz-transition: all .3s ease-in;
    -o-transition: all .3s ease-in;
    transition: all .3s ease-in;
    margin-bottom: 1em;
}

.bar li{
float: left;
width: .5em;
background: #9aa;
    display:block;
    height: 3em;
    position:relative;
    top:0;
    border: .0625em solid #333;

}
.bar input[type="range"]{
position:relative;
    bottom: 0;
    left:0;
}

JavaScript

//RESIZE WITH SLIDER
$('[name="resize"]').change(function(event){
    var size = $(this).val();
    size = size +"em";
    $('article.meter.graph').css("font-size", size);
});                              

//ADJUST METER WITH SLIDER
$('.meter input[type="range"]').change(function(event){
    //identify the input field
    var name = $(this).attr("name");
    var identifier = $(this).attr('class'); //pair input and receiver
    var identifier = "meter."+ identifier;
    //get the value
    var value = $(this).val();
    $(identifier).val(value); 
});