jQuery simple UI Slider

In this tutorial I’m going to teach you how to construct a simple UI slider using jQuery. It’s very effective and can be used for almost anything. You can slide through text, pictures, videos, etc. So let’s get started!

picprev jQuery Simple UI Slider Tutorial

You’ll first need to set up the HTML and add some basic styling to the content. So within the body of the HTML file, we’ll write:

jQuery Simple UI Slider -- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in metus risus. Donec enim nisi, sollicitudin vel malesuada ac, vehicula at neque. Cum sociis natoque penatibus et magnis dis parturient montes

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in metus risus. Donec enim nisi, sollicitudin vel malesuada ac, vehicula at neque. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas vulputate nisi quis ante auctor sagittis. Curabitur nisl tortor, tincidunt sagittis luctus ac, consequat sit amet dui. In hac habitasse platea dictumst. Suspendisse potenti.

Stunning Mesh, Stunning Mesh, Stunning Mesh, Stunning Mesh, Stunning Mesh, Stunning Mesh, Stunning Mesh, Stunning Mesh, Stunning Mesh

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in metus risus. Donec enim nisi, sollicitudin vel malesuada ac, vehicula at neque. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas vulputate nisi quis ante auctor sagittis. Curabitur nisl tortor, tincidunt sagittis luctus ac, consequat sit amet dui. In hac habitasse platea dictumst. Suspendisse potenti.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in metus risus. Donec enim nisi, sollicitudin vel malesuada ac, vehicula at neque. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas vulputate nisi quis ante auctor sagittis. Curabitur nisl tortor, tincidunt sagittis luctus ac, consequat sit amet dui. In hac habitasse platea dictumst. Suspendisse potenti.

This sets up a “main_body” div that contains everything within in. Then it has the “content-slider” div which will be the actual sliding bar. The “content-scroll” div is what will be
controlled by the sliding funtcions we write later in jQuery. And finally the “content-holder” div is simply what contains the plain text that is written; all the paragraphs also have
the same class attributed to them.

Here’s the CSS setup with comments so you can understand what each property does:

* { margin: 0; padding: 0;}
a:focus { outline:none }
html {overflow-y: scroll;}
#main_body { width: 510px; margin: 0 auto; padding-top: 100px; }
/* This is the background of the slider (not the knob you actually move) */
#content-slider {
width: 490px;
height: 6px;
margin: 5px;
background: pink;
position: relative;
}
/* How big the inside of the scrolling box is */
#content-scroll {
width: 500px;
height: 300px;
margin-top: 19px;
overflow: hidden;
border: solid 1px black;
}
/* the width & height of ALL the paragraphs when aligned next to eachother */
#content-holder { width: 2500px; height: 400px; }
/* each paragraph must be "floated left" so it's next to each other paragraph as you slide */
.parag { width: 490px; height: 300px; padding: 5px; float: left; }

So as you can see, we set up a pretty simple base for our content slider. When you open up the HTML file, the content should look like this.

pic1 jQuery Simple UI Slider Tutorial

The reason you only see one of the paragraphs now is because we aligned each paragraph to be floated to the left, and we set each of them to have their own width, so that means
all the other paragraphs are all aligned right next to each other, you just can’t get to them yet.
Since everything seems to be properly aligned, let’s add an actual slider function so that we can slide through all our content.
Aside from the jquery library, we’re going to be using the ui.core and ui.slider libraries to make our sliding effect. So this is how we’re going to set up the javascript in our
HTML file (You may need to download jQuery from their website if you don’t have these libraries).






We now have access to jQuery and the UI part of jQuery, so we can create our slider functions. Put this code within

function slide_change(e, ui) {
var maxScroll = $("#content-scroll").attr("scrollWidth") - $("#content-scroll").width();
$("#content-scroll").animate({scrollLeft: ui.value * (maxScroll / 100) }, 800);
}
function slider_sliding(e, ui) {
var maxScroll = $("#content-scroll").attr("scrollWidth") - $("#content-scroll").width();
$("#content-scroll").attr({scrollLeft: ui.value * (maxScroll / 100) });
}
/* setting the final properties */
$(document).ready(function(){
$("#content-slider").slider({
animate: true,
change: slide_change,
slide: slider_sliding
});
});

The first function, “function slide_change(e, ui)” focuses on the actual changing from one content area to another. The function takes the arguments event & ui, which is why the
e and ui are in parentheses. It sets the variable maxScroll to equal a certain width
by subtracting one width from the other. Then the animate function will allow an animaton to take place when you slide the slider from one point to another. The speed is set to
800 milliseconds. You can change this number to get some different effects.

The second function, “function slider_sliding(e, ui)” focuses on the slider knob you move. This event is triggered by every mouse move during the slide. It syncs up the slider
with the content.

Then we set te final properties. We access “#content-slider” and set it to be our slider. Then we set animations to be true, and its change option is the function “slide_change” and
our slider option comes from the “slider_sliding” function. After the jQuery commands, there’s one more thing left to do, and that’s set up the CSS for the sliding knob.

To access the slider in the CSS, use the class “.ui-slider-handle”. So for this example write up the CSS like so:

.ui-slider-handle {
width: 35px;
height: 14px;
position: absolute; /* this is very important */
top: -4px;
background: purple;
border: solid 1px black;
}

And that’s it you’re done! You can play around a little with the functions and CSS styling to make it look and work exactly how you want it to. Thanks for reading the tutorial
and hopefully learning something new!