//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); });
<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" />
.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; }