Basic requirements for sliders

When scripting is available,  we can update the form to provide sliders for our questions. Before that happens though, we need to add the jQuery UI library to the head of the page, which does much of the slider work for us.

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 (this post)
  4. Creating the sliders
  5. Scripting the slider regions
  6. Conclusion to sliders

To get started you will need to download a copy of jQuery UI to your computer. When you build your own download, you won’t need more than the Core and Slider components, but feel free to choose more of them if you want to explore further.

This example code uses just the stylesheet from the download, so copy the contents of the css folder from your download to the css folder of your slider form.

Add this code to the head of your web page and jQuery UI will be ready to be used.

<link type="text/css" rel="stylesheet"
    href="css/ui-lightness/jquery-ui-1.7.2.custom.css">
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1.3.2");
google.load("jqueryui", "1.7.2");
</script>

We have chosen to get the script files from google, which has two main benefits:

  • The library files for jQuery and jQuery UI are accessed in parallel with the rest of your  web page
  • The files are more likely to have already been cached on a persons computer from other web sites, so they don’t need to be downloaded a second time

We can now go ahead and modify the HTML code from the Unscripted Form for Sliders post. The only change that we make to the form is to add a class name to each form paragraph.

Add a class name of slider to each paragraph that we intend to use for the slider, so that our script will know what we want to use for the sliders. For example, the first paragraph now looks like this:

<p class="slider"><label>
    Clowns are scary creatures
    <input type="text" name="clowns">
</label></p>

Now we can target the paragraphs denoted as slider and use scripting to make further changes to the form.

We will be using jQuery for our scripting, so we will place our script code in a scripting file called js/script.js
In the head of the page, add this after the script that loads jQuery UI

<script type="text/javascript" src="js/script.js"></script>

and place this code in js/script.js

$(function () {

});

We will be placing our jQuery code inside the above function.

Things are now ready for us to go ahead and create our sliders.
Next: Creating the sliders

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: