How to Create a Touch Based Sliding UI

I’ve come across a post on the iPhoneWebDev board from a member named Rico who posted some source using touch events to emulate sliding of the iPhone UI.

Hi guys,

Just to share you a piece of code on how you could do a slider ui

control using the TouchEvent.

The basic idea is that you setup a new Slider object with the

following parameters: the id of the slider, the id of the fill, the id

of the thumb, the maximum value, the current initial value, and a

callback method. The callback method will be called when the finger is

removed from the phone.

--- begin html ---
    <div id="slider" class="slider" style="width:250px">
        <div class="sfill" id="sliderFill"></div>
        <div class="sthumb" id="sliderThumb"></div>
    </div>
    <script>
          function blah(value)
          {
              alert("new value after release: " + value);
          }
          new Slider("slider", "sliderFill", "sliderThumb", 100, 50,
blah);
    </script>
--- end html ---

--- begin css ---
        .slider
        {
                position:relative;
                height:28px;
                border-width: 0 5px 0 5px;
                -webkit-border-image: url(../images/slider.png) 0 5 0 5;
        }
        .slider > .sfill
        {
                position:absolute;
                left: -4px; /* the border-width plus 1 */
                height:28px;
                width: 0;
                border-width: 0 5px 0 5px;
                -webkit-border-image: url(../images/slider_fill.png) 0 5 0 5;
        }
        .slider > .sthumb
        {
                position:absolute;
                background-image: url(../images/slider_thumb.png);
                width: 30px;
                height: 28px;
        }
--- end css ---

--- begin slider.js ---
    function Slider(slider, fill, thumb, maxRange, currentPos,
callback)
    {
        var slider = document.getElementById(slider);
        var fill = document.getElementById(fill);
        var thumb = document.getElementById(thumb);
        var maxRange = maxRange;
        var currentPos = currentPos;
        var thumbWidth = 20;
        var borderWidth = 10;

        function sliderMove(event) {
            var x = event.touches[0].clientX - findOffsetLeft(slider);
            var relativePos = ((x-thumbWidth/2) * maxRange) /
                (slider.clientWidth + borderWidth - thumbWidth);
            if( relativePos < 0 )
            {
                currentPos = 0;
            }
            else if( relativePos > maxRange )
            {
                currentPos = maxRange;
            }
            else
            {
                currentPos = relativePos;
            }

            positionThumb();
        }

        function positionThumb()
        {
            var relativePos = (thumbWidth/2) +
                ((slider.clientWidth + borderWidth - thumbWidth) *
currentPos) / maxRange;
            fill.style.width = relativePos + "px";
            thumb.style.left = relativePos - borderWidth - (thumbWidth/
2) + "px";
        }

        slider.ontouchstart = function(event) {
            sliderMove(event);
        }
        slider.ontouchmove = function(event) {
            event.preventDefault();
            sliderMove(event);
        }
        slider.ontouchend = function(event) {
            callback(currentPos);
        }

        positionThumb();
    }

    function findOffsetLeft(obj)
    {
            var curleft = 0;
            if (obj.offsetParent) {
            do {
                        curleft += obj.offsetLeft;
                } while (obj = obj.offsetParent);
            }
        return curleft;
    }
--- end slider.js ---

I know it’s not perfect, but it does the trick and is clean enough

You may also want to read...

• Creating Rounded Corners Using CSS
• Add an iPhone Springboard Icon to Your Website
• SMS Support for iPhone-Friendly Websites