slider jquery

Creating a Volume Controller with jQuery UI Slider

By Thoriq Firdaus. Filed in Web Design

In this post we will code a PSD UI and turn it into something more functional. We are going to code the following PSD UI Slider to be applied as the jQuery UI Slider theme.
However, please take note that this tutorial is intended for intermediate levels of experience. Having said that, It’s still relatively easy to follow, so long as you are fairly familiar with CSS and jQuery.
All right, now let’s get started.

Step 1: the jQuery UI

We obviously need the jQuery and the jQuery UI Library, and we have two option to utilize them. First, we can link the jQuery and the jQuery UI directly from the following CDN: Google Ajax API CDN, Microsoft CDN, and jQuery CDN, there are lots of advantages of using the hosted CDN file when we put our site live online.
But since we will only be working on it offline, we will be using the second way instead.
We will download and customize the jQuery UI library from the official download page. As we only need the Slider plugin, we will select only the Slider library along with its dependencies and leave the others. That way the files we use will be much slimmer and can load faster. After that, link all those libraries to the HTML document, preferably at the bottom of the page or before the close

tag to be exact.

view plaincopy to clipboardprint? 

<script src="js/jquery-1.7.2.min.js"></script>   

<script src="js/jquery-ui-1.8.21.custom.min.js"></script>  

Step 2: HTML markup

The markup for the slider is very simple, we wrapped all necessary markup – the tooltip, the slider, and the volume – inside an HTML5 section tag. The jQuery UI will then automatically generate the rest.

view plaincopy to clipboardprint? 

<section>    

    <span class="tooltip"></span>    

    <div id="slider"></div>   

    <span class="volume"></span>   

</section>  

Step 3: Install the Slider UI

The snippet below will install the Slider on the page, but it applies only the default configuration.

view plaincopy to clipboardprint?

1. $(function() {  
2.     $( "#slider" ).slider();  
3. });  

So here we will enhance the slider a little by adding other configurations.
First, we store the slider element as a variable.

view plaincopy to clipboardprint?

1. var slider = $('#slider'),  

Then we set the minimum default value of the slider to be about 35, when it is firstly loaded.

view plaincopy to clipboardprint?

1. slider.slider({  
2.     range: "min",  
3.     value: 35,  
4. });  

At this point, we won’t see anything on the browser yet, because the jQuery UI is basically only generating the markup. So, we need to apply some styles to start seeing the result visually on the browser.

Step 4: The Styles

Before proceeding, we need some assets from the PSD source file such as the background texture and the icon.

We will not talk about how to slice in this article, we will just focus on the code. If you aren’t sure how to slice, watch the following screencast first before proceeding.

• Converting a Design from PSD to HTML – Nettuts+

All right, now let’s begin adding the styles.
We will start by positioning the slider at the center of the browser’s window and attach the background that we had sliced out from the PSD to the body.

view plaincopy to clipboardprint?

1. body {  
2.     background: url('../images/bg.jpg') repeat top left;  
3. }  
4. section {  
5.     width: 150px;  
6.     height: auto;  
7.     margin: 100px auto 0;  
8.     position: relative;  
9. }  

Next, we will apply the styles for the tooltip, the volume, the handle, the slider range and the slider itself.

We will do this part by part, starting with…

Slider

Since we did not define the maximum value for the Slider itself, the jQuery UI will apply the default; that is 100. Therefore, we can also apply 100 (px) for the slider’s width.

view plaincopy to clipboardprint?

1. #slider{  
2.     border-width: 1px;  
3.     border-style: solid;  
4.     border-color: #333 #333 #777 #333;  
5.     border-radius: 25px;  
6.     width: 100px;  
7.     position: absolute;  
8.     height: 13px;  
9.     background-color: #8e8d8d;  
10.     background: url('../images/bg-track.png') repeat top left;  
11.   box-shadow: inset 0 1px 5px 0px rgba(0, 0, 0, .5),   
12.                  0 1px 0 0px rgba(250, 250, 250, .5);  
13.   left: 20px;  
14. }  

Tooltip

The tooltip will be positioned above the slider by specifying its position absolutely with -25px for its top position.

view plaincopy to clipboardprint?

1. .tooltip {  
2.     position: absolute;  
3.     display: block;  
4.     top: -25px;  
5.     width: 35px;  
6.     height: 20px;  
7.     color: #fff;  
8.     text-align: center;  
9.     font: 10pt Tahoma, Arial, sans-serif ;  
10.     border-radius: 3px;  
11.     border: 1px solid #333;  
12.   box-shadow: 1px 1px 2px 0px rgba(0, 0, 0, .3);  
13.     box-sizing: border-box;  
14.     background: linear-gradient(top, rgba(69,72,77,0.5) 0%,rgba(0,0,0,0.5) 100%);  
15. }  

Volume

We have modified the volume icon a bit to meet our idea. The idea is we are going to create an effect to raise the volume bar gradually in accordance with the slider’s value. I’m sure you often seen such an effect in a media player user interface.

view plaincopy to clipboardprint? 

.volume {   

    display: inline-block;   

    width: 25px;   

    height: 25px;   

    rightright: -5px;   

    background: url('../images/volume.png') no-repeat 0 -50px;   

    position: absolute;   

    margin-top: -5px;   

}  

The UI Handle

The handle’s style is quite simple; it will have an icon that looks like a metallic circle, sliced from the PSD, and attached as the background.
We will also change the cursor mode to pointer, so the user will notice that this element is drag-able.

view plaincopy to clipboardprint?

1. .ui-slider-handle {  
2.     position: absolute;  
3.     z-index: 2;  
4.     width: 25px;  
5.     height: 25px;  
6.     cursor: pointer;  
7.     background: url('../images/handle.png') no-repeat 50% 50%;  
8.     font-weight: bold;  
9.     color: #1C94C4;  
10.     outline: none;  
11.     top: -7px;  
12.     margin-left: -12px;  
13. }  

The Slider Range

The slider range will have a slightly white gradient color.

view plaincopy to clipboardprint?

1. .ui-slider-range {  
2.     background: linear-gradient(top, #ffffff 0%,#eaeaea 100%);  
3.     position: absolute;  
4.     border: 0;  
5.     top: 0;  
6.     height: 100%;  
7.     border-radius: 25px;  
8. }  

Step 5: The Effect

In this step we are going to start working on the Slider’s special effect.

Tooltip

At this point, the tooltip has no content yet, so we are going to fill it with the slider’s value. Also, the tooltip’s horizontal position will be correspond with the handle’s position.
First of all, we store the tooltip element as a variable.

view plaincopy to clipboardprint?

1. var tooltip = $('.tooltip');  

Then we define the tooltip’s effect we have mentioned above inside the Slide Event.

view plaincopy to clipboardprint?

1. slide: function(event, ui) {   
2. var value = slider.slider('value'),  
3. tooltip.css('left', value).text(ui.value);  

But, we also want the tooltip to be initially hidden.

1. tooltip.hide();  

After that, when the handle is about to start sliding, it will be shown with a fade-in effect.

view plaincopy to clipboardprint?

1. start: function(event,ui) {  
2.       tooltip.fadeIn('fast');  
3. },  

And, when the user stops sliding the handle, the tooltip will fade-out and be hidden.

view plaincopy to clipboardprint?

1. stop: function(event,ui) {  
2.      tooltip.fadeOut('fast');  
3. },  

Volume

As we have mentioned above in the Styles section, we plan the volume icon to change correspondingly with the handle’s position or to be exact, the slider’s value. So, we will apply the following conditional statement to create this effect.
But, firstly, we store the volume element as well as the slider’s value as a variable.

view plaincopy to clipboardprint?

1. volume = $('.volume');  

Then we start the conditional statement.
When the slider’s value is lower or equal to 5 the volume icon will have no bars at all, indicating that the volume is very low, but when the slider’s value is increasing, the volume bar will start increasing as well.

view plaincopy to clipboardprint?

1. if(value <= 5) {   
2.     volume.css('background-position', '0 0');  
3. }   
4. else if (value <= 25) {  
5.     volume.css('background-position', '0 -25px');  
6. }   
7. else if (value <= 75) {  
8.     volume.css('background-position', '0 -50px');  
9. }   
10. else {  
11.     volume.css('background-position', '0 -75px');  
12. };  

Put them all together

All right, in case you are confused with all the above stuff, don’t be. Here is the shortcut. Put all the following codes into your document.

view plaincopy to clipboardprint?

1. $(function() {  
2.   
3.     var slider = $('#slider'),  
4.         tooltip = $('.tooltip');  
5.   
6.     tooltip.hide();  
7.   
8.     slider.slider({  
9.         range: "min",  
10.         min: 1,  
11.         value: 35,  
12.   
13.         start: function(event,ui) {  
14.           tooltip.fadeIn('fast');  
15.         },  
16.   
17.         slide: function(event, ui) {  
18.   
19.             var value = slider.slider('value'),  
20.                 volume = $('.volume');  
21.   
22.             tooltip.css('left', value).text(ui.value);  
23.   
24.             if(value <= 5) {   
25.                 volume.css('background-position', '0 0');  
26.             }   
27.             else if (value <= 25) {  
28.                 volume.css('background-position', '0 -25px');  
29.             }   
30.             else if (value <= 75) {  
31.                 volume.css('background-position', '0 -50px');  
32.             }   
33.             else {  
34.                 volume.css('background-position', '0 -75px');  
35.             };  
36.   
37.         },  
38.   
39.         stop: function(event,ui) {  
40.           tooltip.fadeOut('fast');  
41.         },  
42.     });  
43.   
44. });  

All right, let’s now view the result in the browser.

• Demo
• Download Source

Conclusion

Today we have successfully created a more elegant jQuery UI theme but at the same time we have also successfully translated a PSD User Interface into a functional volume controller.
We hope this tutorial inspires you and could help you understand how to turn a PSD into a more usable product.
Lastly, if you have any question regarding this tutorial, feel free to add it in the comments section below.
source 

http://www.hongkiat.com/blog/jquery-volumn-slider/