Icon Sprite Position Tester

This simple fiddle will allow you to find the left position of a sprite by simply moving a slider.

by Erik Bartlow

HTML

<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<div id="sprite" class="sprite" style="background-position: 0px 0px;"></div>
<div style="border: solid 1px #000000; width: 500px; text-align: center; vertical-align: baseline;">
     <h4>Move the slider to move the sprite within the container</h4>

    <div id="movesprite" style="height: 10px; width: 300px; margin: 0 auto 0;"></div>
    <br />
    <input type="text" id="spritePos" style="width: 50px;" value="0" />
</div>
<div id="sprite18" class="sprite18" style="background-position: 0px 0px;"></div>
<div style="border: solid 1px #000000; width: 500px; text-align: center; vertical-align: baseline;">
     <h4>Move the slider to move the sprite within the container</h4>

    <div id="movesprite18" style="height: 10px; width: 300px; margin: 0 auto 0;"></div>
    <br />
    <input type="text" id="spritePos18" style="width: 50px;" value="0" />
</div>

CSS

.sprite {
    background-image: url(http://thebartlows.com/scripts/iconsprite/sprites.png);
    background-position: 0px 0px;
    width: 36px;
    height: 36px;
    cursor: pointer;
    border: solid 1px #000000;
}
.sprite18 {
    background-image: url(http://thebartlows.com/scripts/iconsprite/sprites18.png);
    background-position: 0px 0px;
    width: 18px;
    height: 18px;
    cursor: pointer;
    border: solid 1px #000000;
}

JavaScript

$(function () {
    $("#movesprite18").slider({
        range: "max",
        min: 0,
        max: 2500,
        slide: function (event, ui) {
            $('#sprite18').css("background-position", 0 - ui.value + 'px 0px');
            $('#spritePos18').val(0 - ui.value + 'px');
        }
    });
    $("#movesprite").slider({
        range: "max",
        min: 0,
        max: 2500,
        slide: function (event, ui) {
            $('#sprite').css("background-position", 0 - ui.value + 'px 0px');
            $('#spritePos').val(0 - ui.value + 'px');
        }
    });
});