{"id":14206,"date":"2012-07-06T21:01:52","date_gmt":"2012-07-06T13:01:52","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=14206"},"modified":"2025-04-04T01:10:50","modified_gmt":"2025-04-03T17:10:50","slug":"jquery-volumn-slider","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/jquery-volumn-slider\/","title":{"rendered":"Creating a Volume Controller with jQuery UI Slider"},"content":{"rendered":"

If you are a freebies<\/a> hunter, chances are you have downloaded lots of PSD user interfaces<\/a> (UI). Some of them are truly amazing and could save our time by prototyping the design we were working on.<\/p>\n

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<\/a> to be applied as the jQuery UI Slider<\/a> theme.<\/p>\n

However, please take note<\/strong> that this tutorial is intended for intermediate levels<\/strong> of experience. Having said that, It\u2019s still relatively easy to follow, so long as you are fairly familiar with CSS and jQuery.<\/p>\n

All right, now let\u2019s get started.<\/p>\n

Step 1: the jQuery UI<\/h2>\n

We obviously need the jQuery<\/a> and the jQuery UI Library<\/a>, 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<\/a>, Microsoft CDN<\/a>, and jQuery CDN<\/a>, there are lots of advantages of using the hosted CDN file when we put our site live online.<\/p>\n

But since we will only be working on it offline, we will be using the second<\/em> way instead.<\/p>\n

We will download and customize the jQuery UI library from the official download page<\/a>. As we only need the Slider plugin<\/a>, 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 <\/body><\/code> tag to be exact.<\/p>\n

\r\n <script src=\"js\/jquery-1.7.2.min.js\"><\/script>\r\n <script src=\"js\/jquery-ui-1.8.21.custom.min.js\"><\/script><\/pre>\n
Step 2: HTML markup<\/h2>\n
The markup for the slider is very simple, we wrapped all necessary markup \u2013 the tooltip, the slider, and the volume \u2013 inside an HTML5<\/a> section<\/code> tag. The jQuery UI will then automatically generate the rest.<\/p>\n
\r\n <section> \r\n\t <span class=\"tooltip\"><\/span> \r\n\t <div id=\"slider\"><\/div>\r\n\t <span class=\"volume\"><\/span>\r\n <\/section><\/pre>\n
Step 3: Install the Slider UI<\/h2>\n
The snippet below will install the Slider on the page, but it applies only the default configuration.<\/p>\n
\r\n$(function() {\r\n    $( \"#slider\" ).slider();\r\n});\r\n<\/pre>\n
So here we will enhance the slider a little by adding other configurations.<\/p>\n
First, we store the slider element as a variable.<\/p>\n
\r\n var slider = $('#slider'),<\/pre>\n
Then we set the minimum default value of the slider to be about 35<\/strong>, when it is firstly loaded.<\/p>\n
\r\nslider.slider({\r\n    range: \"min\",\r\n    value: 35,\r\n});\r\n<\/pre>\n
At this point, we won\u2019t see anything on the browser yet, because the jQuery UI is basically only generating the markup<\/strong>. So, we need to apply some styles to start seeing the result visually on the browser.<\/p>\n
Step 4: The Styles<\/h2>\n
Before proceeding, we need some assets from the PSD source file such as the background texture and the icon.<\/p>\n
<\/figure>\n
We will not talk about how to slice<\/strong> in this article, we will just focus on the code. If you aren\u2019t sure how to slice, watch the following screencast first before proceeding.<\/p>\n