Duration: 17 minutes
Summary: In this video, we continue our series of jQuery UI widgets by
discussing the slider. As we usually do, we show the HTML content before
applying the slider on them. Then, we call the slider() function on the div to
see the impact. After that, we start discussing the options available to
manipulate the slider. Next, we talk about the events. There are two events we
are discussing here: (1) the slide event and (2) the stop event. For
illustration, we add a span under the slider with text “Test”. We implement the
events so that the value changed with the slide event will be applied to the span’s
font size. So as we are moving the head of the slider, the font of the span is
changing. With the stop event, we changed the background color of the span to
red and make it explode!
Used: jQuery UI and Visual Studio 2010
Keyword: jQuery UI, Visual Studio 2010, slider, HTML
Transcript: Welcome back everyone. This is Ayad Boudiab. I'm a senior .NET application
developer. In these series of videos we've been discussing some jQuery UI
widgets. I discussed the dialog in the couple of videos before. We looked
at the options that we could have for the dialog and also what events and
method we can call on that specific dialog. In today's video, I need to
talk about the slider.
As we normally do, we start with our scripts that we need. We have a link
to the style sheet, and in this case we are using the jQuery UI custom
under the Dark Hive. That's the style that we chose. Also, we'll have
reference for jQuery UI here, jQuery right before it because we need load
jQuery before jQuery UI. Also, we have the actual script where our code
This is the jQuery function when the DOM is ready, what you want to
execute. Right below in the body I have the H2 with a class of demo header.
It says slider. A div with ID Slider, again you can give it any ID you
want. In this case we named it slider. Then I have div with a span within
it that has an ID Num and that will show later the need of it.
Let's look at the way it looks like in the browser right now. We have a
slider, nothing else, and the word test, which is coming in from the span.
Now let's see if we can, like we've done with the dialog, let's see if we
can get the specific slider with an ID. So I'll have to reference that
using the pound sign because that's how I reference elements with ID, using
jQuery, and this name Slider, that will give me the actual element, in this
case that specific div.
I'm going to call Slider on it. This is the slider function that I'm
calling on that specific div. If I save this and I try to preview it, I
will see a slider. I can slide back and forth. Okay, so far so good. Then I
can make this slider like we've seen before. I can pass options to the
slider function to do some type of actions of hiding something, showing
something, disabling something, providing different values for the slider.
Those options are provided using the curly braces. Inside here I can have
something like "disabled." I make this one to be true. So the slider is
disabled. Try to preview that, and I cannot move the slider. You notice I
cannot move it from its location because it's been disabled. That's one of
the options that you, for example, you turn it off and then when the user
takes certain action on the page, you have the slider being enabled again.
This is one of the options that you can provide for this slider.
I can also provide the option of animating the slider, animate. If the
animation is false, basically, nothing is different. I can just click and
move the slider over. But if I made the animation to be true and try to
preview that, you notice that it's animated. When the head of the slider is
being moved, it is animated. You see it's not like it used to be.
Also, by the way, instead of doing animation true or false, you can give it
specific values. For example slow, you won't see much difference. It's just
that the animation is a little bit slow when I move the head for the
slider. You noticed that, right? So it's moving slowly. I also have the
option of making that normal, have normal movement of animation for the
slider. I can also make that fast as well. I didn't mean false. I meant
These are the options that you can provide. There are two cases in the case
of animate. You can provide the actual true or false to animate or not to
animate, and you can also provide the actual strength to display, whether
you want that slow, fast, or normal.
When I'm moving the slider left and right, I need to be able to give it a
certain value. I want that to be the minimum and a maximum. So I can say
the minimum value for this slider is 1, and then the maximum value is 10.
These are the values that I want for that specific slider.
When the slider displays, it displays on the screen. You don't see 1 and
10, but these are the minimum and the maximum values that the slider can
move in between. So you don't see 1, 2, 3, 4, 5 in here. It didn't mean
that. It's just that the minimum value provided is 1 and the maximum value
that you provide for that slider is actually 10.
You can also, in addition to minimum value of 1 and maximum value of 10,
you can also do a step. You're not stepping by one, for example. You can
step by 0.5. So 0.5 1.0, 1.5, 2.0, 2.5, 3.0 and so on. These are the steps
that you can step through with the slider. So moving the slider, you move
that specific value by that step. Also, not only that you can provide the
minimum and maximum step, you can also provide the value where you want
that slider head to be. You want it to be at 5. Considering that the
minimum value being 1 and the maximum value being 10, having a value of 5
should place the head of the slider right in the middle for that specific
slider. Here's the head showing up in the middle. Then I can move it around
the way I want to.
Now, by default, as you've notice, when I display the slider, just remove
all the options and then let's go ahead and view the slider. You'll notice
the slider is displayed horizontally, from left to right, and I can move
the head for the slider.
Well, as you might have guess, I can provide the orientation for this
slider. Orientation will tell me whether the slider is pointing horizontal,
like you've seen, or vertical. Of course, since I did not provide this
value before, the default for the orientation for the slider would be
horizontal. I can specify something like vertical. I want the slider to
display. Go ahead and view that in the browser. Now, you notice that the
slider is actually vertical instead horizontal. That would save you some
space, especially when you're displaying something on the side of the
We provided the actual orientation for the slider. We've provided a minimum
and a maximum value for the slider, and where we want that value to be to
start with, right in the middle or left or right, and how we step through
the slider, by 1, by 2, by 0.5. You can specific the slider yourself. You
can also animate the slider, and you can also disable the slider for these
options that we have discussed.
There's also some more functionality that we can work with. So as I said
earlier, there are some events that we can deal with when it comes to the
slider, and also like other UI widgets that we work with, for example the
dialog and so on. So there are these events that we can trigger that we can
associate them with function so when that event is triggered, the function
would be called.
Let's go ahead and remove this. Here are my events that I want to display
for that specific slider. Now, the two events that I'm interested in, in
this case, is actually the slide and the stop. Let's go ahead and provide
the skeleton for this and see how that works. For the slide, there's an
event. Again, like I showed you before, instead of providing an actual
value in this case, I need to provide a function. It's either I write the
function here, or I write the name of the function here and I write it
If the function is big, definitely just provide the name and write it
somewhere else so you can make your code cleaner. If the function is small,
just provide the function here. In this case, we have just one liner for
that function. Then I'm going to provide the value here. For the function,
for the slider in the case of slide event, I'm going to provide a function.
That function takes an actual event that happened and UI control that it
happened on. Here's the body of that function.
Now the second event is stop. So when the slider stops, what do you want to
do? I also want another function to be triggered. That function also takes
an event and UI as parameters. These are the two events that I'm interested
in. I don't have anything underneath here. So I have two events that are
being called - the one for the slide and the one for the stop.
You notice down here, and if I preview that in the browser, you've seen it
before. You have an actual slider and you have the word test underneath,
and then you have the head of the slider over here. If you scroll, you'll
see that there's an H2 that says slider with an demo header that's coming
in from the CSS that you see on the top of the page. You will see a div for
the slider, but also you see a div with a span with ID Num, right, for
number. Here you have test. Of course, I can name this one anything I want.
I just named it Num in this case, but with the word test underneath.
Basically then, let's see what we can do as for as sliding and stopping for
that specific slider. In this case, when the user is sliding, what do you
want to do? Well, for this one, I'm going to go reference my Num span. I
use the pound sign, reference Num. That will give me Num. I'm going to
change the CSS style sheet on this Num. What do I want to change? I want to
change the font size. I need to change the font size to a specific value.
What that value is, that's the one that I want to choose. So I want to
change the CSS. Specifically, I want to change the font size for that
specific Num, using a value. What is that value? That's the value that I'm
getting from the slider. I'm going to ask the slider to give me the option
value. So it'll tell me what that number is.
So, again, in order to get to the slider, I have to use my dollar sign and
also pound. That will get me to the slider. I have pound sign. Sorry here.
I missed it. Let's type that - slider. That will give me the actual slider
that I'm interested in. Then I'm going to call the slider function on it,
and I'm going to tell it I want a specific option. That option is actually
the value that the user has moved to. This is the value for that slider.
What we did in here is we picked up the slider, and then we built a slider
function to retrieve an option. What's that option? It's the value.
I'm retrieving that option, but since the font size in this case I want is
in pixel, so I have to say for that value, I have to say plus PX for the
pixel. That way I'm retrieving . . . all this mess in here is, first of
all, to retrieve the option of the value that I moved to and then add pixel
to it. It says 50 pixel, for example. I'm going to change the CSS for the
Num. Specifically, I'm changing the font size for that Num. What's that
Num? That's the word "test" down here, that's the span.
Now in the case of stop, what do you want to happen when the user stops
moving the slider head? In this case, again, I'm going to go to the dollar
sign and then I'm going to pound sign num. That will reference for me the
actual num. I'm going to do a CSS on it as well. What do I want to change
in this case? I'm going to change the background color, and then I'm going
to make that background color red. I changed that background color to red
on that test and then .hide. I'm hiding this Num, which is with the word
"test." But when I hide it, I want to make it explode. That's some type of
animation that I'll like to apply to it.
So, in this case then, what we did is we referenced that Num. That will
give me the Num that's down here, that ID. I'm going to change the CSS to
change this background color to red and then make it explode. I have a
function to slide and a function to stop. Let's go ahead . . . I'm sorry,
an event to slide and an event to stop.
I'm going to move the head. As I move the head, you notice that the word
"test" is changing its font size to the value that I'm moving. Every time I
move the head, the value is changing. You notice that it's getting smaller
and it's getting larger. Now, be careful for one thing. I'm going to let go
of the mouse. When I let go of mouse, the stop is going to be called. The
stop will change the background color to red and then make it explode.
There you go. Move back and explode.
Let's refresh the page. Here is I'm moving the head, moving the head,
moving the head. Let go will change it to red and then make it explode.
That's the events that I have associated with the slider. The first one is
actually slide. The second one is stop.
This is the discussion on slider. Of course, there are other events and
methods and options available for the slider. You can find that on the
jQuery UI website.
If you have any questions, please drop us a line on Mr. Bool's website.
Thank you very much for listening. I'm Ayad Boudiab, and you take care.