This is a very lightweight UI component written in LiveScript for picking a value from predefined range. The purpose is to create as simple markup as possible with no preset styles so that it can be customized for your needs with minimal overhead. Demos below are there to give some ideas what you could do with it.
- The source code is hosted in GitHub
- The project page is at http://aropupu.fi/value-bar
Usage
HTML:
<div id="container-id"></div>
JavaScript:
$('#container-id').valueBar({value: 1, max: 3})
State of generated HTML when value 2 is hovered by mouse:
<!-- Container gets "valueBar" class, CSS width defaults to 200px -->
<div class="valueBar" id="container-id">
<!-- Blocks from first to "value" get "active" class -->
<div style="width: 67px" class="highlight active">
<div></div>
</div>
<!-- Hover adds "highlight" class from first to hovered block -->
<div style="width: 67px" class="highlight">
<div></div>
</div>
<div style="width: 66px">
<div></div>
</div>
</div>