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!
Technology 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 would go.
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. Okay.
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 fast.
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 screen.
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 somewhere else.
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.