SVG icon sizer with range
HTML
<b>SVG Icon Sizer Test</b>
<br><i>To Do: Cache setting on user's computer by saving & setting the "Value" on the range.</i>
<br><br>
<div class="sizer_container">
- <input id="sizer" type ="range" value ="80" min ="32" max="256"/> +
</div>
<br><br>
<div class="icon">
<img src="http://scaredrabbit.net/cms/images/test.svg"/><br>
Icon Name
</div>
<div class="icon">
<img src="http://upload.wikimedia.org/wikipedia/commons/3/32/Telefunken_FuBK_test_pattern.svg"/><br>
Icon Name
</div>
<div class="icon">
<img src="http://scaredrabbit.net/cms/images/test.svg"/><br>
Icon Name
</div>
<div class="icon">
<img src="http://scaredrabbit.net/cms/images/test.svg"/><br>
Icon Name
</div>
<div class="icon">
<img src="http://scaredrabbit.net/cms/images/test.svg"/><br>
Icon Name
</div>
<div class="icon">
<img src="http://scaredrabbit.net/cms/images/test.svg"/><br>
Icon Name
</div>
<div class="icon">
<img src="http://scaredrabbit.net/cms/images/test.svg"/><br>
Icon Name
</div>
<div class="icon">
<img src="http://scaredrabbit.net/cms/images/test.svg"/><br>
Icon Name
</div>
CSS
body {
font-family:arial;
padding:20px;
background:#cfd1d2;
font-size:12px;
color:#444;
}
.icon {
display:inline-block;
text-align:center;
padding:10px;
}
.sizer_container {
font-size:11px;
text-shadow:0px 1px 1px #fff;
background:rgba(0,0,0,.1);
border-radius:15px;
display:inline-block;
padding:1px 10px 5px 10px;
}
input[type="range"]{
-webkit-appearance:none !important;
background:#7c8286;
height:3px;
border:1px solid #62666a;
box-shadow:0px 1px 1px #fff;
border-radius:5px;
width:60px;
}
input[type="range"]::-webkit-slider-thumb{
-webkit-appearance:none !important;
background:url('http://scaredrabbit.net/cms/images/thumb.png') center;
height:14px;
width:14px;
}
JavaScript
$(document).ready(function() {
$("#sizer").change(function() {
var iconSize = $(this).val();
$(".icon img").animate({"width": iconSize}, 0);
});
});