Building a number slider for HTML form inputs with jQuery UI and Draggable

Posted in Web Design on Thursday, 7th February 2013 at 9:27AM

Building a number slider for HTML form inputs with jQuery UI and Draggable

This short tutorial will show you how to create a simple but effective jQuery slider that allows users to change the value of a number field on an HTML form.  I built this for newofficeasia.com, a serviced office rental search site, to adjust the search radius but it could be easily adapted and put to all sorts of uses.

slider-example

The HTML

In order for this degrade when javascript is disabled you'll want to create the form without any elements relating to the slider.  For me this included the location text input and the field for the number.

 <div class="distance">
    <input type="text" name="location" id="location" value="City or postcode" />

    <p>Search for offices within <input type="text" name="distance" id="miles" value=
    "any" maxlength="3" /> miles</p>
  </div>

Linked files

This technique relies on jQuery and jQuery UI's Draggable widget so the next thing to do is import these into your document.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="/js/vendor/jquery-1.8.0.min.js"><\/script>')</script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.0/jquery-ui.min.js"></script>

The Javascript

Firstly you need to dynamically create the div to hold the slider.  I created it directly after the 'Location' field using jQuery's 'after' function.  It includes the holding div (#slider) and an image to act as the pointer (.slidePointer).

$(function () {

    $('#location').after('<div\nid="slider"><img\nsrc="img/formSliderPointer.png" alt="formSliderPointer" class="slidePointer" width="35" height="38"/></div>');

});

Once the document is loaded it's time to bring the slider to life by applying the Draggable widget to the pointer image.

$(document).ready(function() {

$(function () {
    $(".slidePointer").draggable({
        containment: 'parent',
        axis: 'x',
        drag: function (event, ui) {
            var xPos = 2 * parseInt($(this).css('left'), 10);
            if (xPos <= 1) {
                $('input[name=distance]').val('1');
            } else if (xPos >= 399) {
                $('input[name=distance]').val('any');
            } else {
                $('input[name=distance]').val(xPos);
            }
        }
    });
});

});

This function sets Draggable to use the pointer's parent div as the container to stop it being dragged outslide of #slider, and then to only drag horizontally on the x-axis.

Next it uses a 'drag' function to monitor the position of the pointer in relation to the container's left edge.  The variable xPos is holding this value and the scope of the slider can be increased or decreased by multiplying xPos and thus the increments that it represents.

Finally the function monitors the value of xPos and sets the miles text input accordingly. If xPos falls below a certain value it defaults the input to '1' and if it extends beyond a certain value it defaults it to 'any'.

The CSS

So that's it nearly working but the final step is to style the elements.  These styles just make sure that the slider container is the right size and with the right background and that the pointer is in the correct initial position.

.distance {
width:235px;
}

#slider {
width:235px;
height:25px;
position:relative;
background:url(../img/formSliderBG.png) no-repeat;
margin-top:8px;
}

#slider img {
position:absolute;
left:105px;
top:-13px;
}

.slidePointer:hover {
cursor:pointer;
}

View live demo

Add your comment

Remember me?

Notify me of follow-up comments?

Michael's Paintings

Saas Evening

Saas Evening
30 x 25 cm
Acrylics, ink and cotton on plywood

Michael's photos

The Kisoro house

The Kisoro house

Featured Web Project

Infinity production page

Project: Infinity Productions
URL: http://www.infinityproductions.co.u