Facet Slider Markup

by ritcheyer

HTML

<!-- unnecessary <br /> tags -->
<br /><br />
<!-- -->

<div class="bg foreground">
    <ol class="tickmarks">
        <li class="bg tick" style="left:  -3px;">0</li>
        <li class="bg tick" style="left:  29px;">1</li>
        <li class="bg tick" style="left:  60px;">2</li>
        <li class="bg tick" style="left:  91px;">3</li>
        <li class="bg tick" style="left: 123px;">4</li>
        <li class="bg tick active" style="left: 154px;">5</li>
        <li class="bg tick" style="left: 185px;">6</li>
        <li class="bg tick" style="left: 215px;">+</li>
    </ol>
</div>

CSS

.graph-sprite .bg {
    background-image: url('../img/sprite-facet-sliders.png');
    background-repeat: no-repeat;
}

.tickmarks {
    position: relative;
    margin: 0;
    padding: 0;
    list-style: none;
}
.tickmarks .tick {
    position: absolute;
    top: -18px;
    height: 18px;
    margin: 0;
    padding: 0;
    background-position: 3px -112px;
}
.tickmarks .active { background-position: -235px -112px; }