Creating the sliders

When creating our sliders, the changes that we want to make are:

  • add an empty div to contain the slider
  • add some region descriptions beneath the slider
  • hide the input field

This post is part of a series that guides you through creating robust sliders for your forms.

  1. Introduction to sliders
  2. Accessible slider alternative
  3. Basic requirements for sliders
  4. Creating the sliders (this post)
  5. Scripting the slider regions
  6. Conclusion to sliders

After the paragraph, we need to add the div for the slider, as well as the list of regions.

$('p.slider').after(
    '<div class="slider"></div>' +
    '<ul class="slider">' +
        '<li>I strongly disagree</li>' +
        '<li>I disagree</li>' +
        '<li>I am indifferent</li>' +
        '<li>I agree somewhat</li>' +
        '<li>I strongly agree</li>' +
    '<ul>'
);

This HTML code is being added from the script, instead of being hidden in the original HTML code, because this list is not useful on an unscripted page. Also, when there are multiple sliders on a page, repeated information such as this is best managed from just the one location.

The basic CSS for this list floats each region description to the left on the same line, and we can neatly clear the floats with overflow: hidden; and width: 100% on the whole list, to ensure that the list box fully expands to include the floated items. Otherwise some spacing issues can occur.

ul.slider {
    margin-left: 0;
    padding-left: 0;
    overflow: hidden;
    width: 100%;
}
ul.slider li {
    margin-left: 0;
    padding-left: 0;
    list-style-type: none;
    float: left;
}

We can also help to make the regions look better, by making each of them 20% of the width, and coloring the unchosen list items in a light grey color.

ul.slider li {
    width: 20%;
}
ul.slider li {
    color: #ccc;
}
ul.slider li.active {
    color: black;
}

We can now hide the existing input field and activate the sliders:

$('p.slider input').hide();
$('div.slider').slider();

Form sliders ready to use

Even though the sliders are now visible, we still need to:

  • connect the slider to the form
  • update the number on the slider bar
  • update the form field value

As we will be updating the slider whenever it moves, we want to use the slide event so that we can make some updates while the slider is in motion.

Change the last line of the above code to the following:

$('div.slider').slider({
    slide: function (event, ui) {

    }
});

When the slider is moved, we want to update the input field with the slider value. We can find the input field by starting from the slider handle and going up the DOM tree to the div element. From there we can move to the paragraph that comes before it. From the context of that paragraph we can get the input field, and set its value to that of the slider.

var $para = $(ui.handle).parent().prev();
$('input', $para).val(ui.value);

The dollar sign in front of the para variable helps to remind us that it is not a standard element, but is a jQuery object instead.

This is also a good time to provide some visual feedback on the slider itself, where we update the slider handle with the same value.

$(ui.handle).text(ui.value);

As there is going to be some other scripting in this same area later on, I’ll place these scripts inside their own function called updateValue, which helps to make the code easier to understand.

Add this code to the function in the slider for the slide event:

function updateValue (ui) {
    var $para = $(ui.handle).parent().prev();
    $('input', $para).val(ui.value);
    $(ui.handle).text(ui.value);
}
updateValue(ui);

We can now see on the slider that the number has an underline on it (which is a hang-over from being link element) and that the value is left aligned, which makes single-digit values look askew. With the addition of a few style declarations, we can tidy these things up.

div.slider a {
    text-align: center;
    text-decoration: none;
}

The slider can now be used with the form.

This is what the scripting code in js/scripts.js now looks like:

$(function () {
    $('p.slider input').hide();
    $('p.slider').after(
        '<div class="slider"></div>' +
        '<ul class="slider">' +
            '<li>I strongly disagree</li>' +
            '<li>I disagree</li>' +
            '<li>I am indifferent</li>' +
            '<li>I agree somewhat</li>' +
            '<li>I strongly agree</li>' +
        '</ul>'
    );
    $('div.slider').slider({
        slide: function (event, ui) {
            function updateValue (ui) {
                var $para = $(ui.handle).parent().prev();
                $('input', $para).val(ui.value);
                $(ui.handle).text(ui.value);
            }
            updateValue(ui);
        }
    });
});

Now that the slider is working, we can finish up by scripting the regions that are underneath the slider.

Next: Scripting the slider regions

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: