Creating a Volume Controller with jQuery UI Slider
If you are a freebies hunter, chances are you have downloaded lots of PSD user interfaces (UI). Some of them are truly amazing and could save our time by prototyping the design we were working on.
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 </body> tag to be exact.
<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.
<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.
$(function() {
$( "#slider" ).slider();
});
So here we will enhance the slider a little by adding other configurations.
First, we store the slider element as a variable.
var slider = $('#slider'),
Then we set the minimum default value of the slider to be about 35, when it is firstly loaded.
slider.slider({
range: "min",
value: 35,
});
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.
body {
background: url('../images/bg.jpg') repeat top left;
}
section {
width: 150px;
height: auto;
margin: 100px auto 0;
position: relative;
}
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.
#slider {
border-width: 1px;
border-style: solid;
border-color: #333 #333 #777 #333;
border-radius: 25px;
width: 100px;
position: absolute;
height: 13px;
background-color: #8e8d8d;
background: url('../images/bg-track.png') repeat top left;
box-shadow: inset 0 1px 5px 0px rgba(0, 0, 0, .5),
0 1px 0 0px rgba(250, 250, 250, .5);
left: 20px;
}
Tooltip
The tooltip will be positioned above the slider by specifying its position absolutely with -25px for its top position.
.tooltip {
position: absolute;
display: block;
top: -25px;
width: 35px;
height: 20px;
color: #fff;
text-align: center;
font: 10pt Tahoma, Arial, sans-serif;
border-radius: 3px;
border: 1px solid #333;
box-shadow: 1px 1px 2px 0px rgba(0, 0, 0, .3);
box-sizing: border-box;
background: linear-gradient(top, rgba(69, 72, 77, 0.5) 0%, rgba(0, 0, 0, 0.5) 100%);
}
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.
.volume {
display: inline-block;
width: 25px;
height: 25px;
right: -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.
.ui-slider-handle {
position: absolute;
z-index: 2;
width: 25px;
height: 25px;
cursor: pointer;
background: url('../images/handle.png') no-repeat 50% 50%;
font-weight: bold;
color: #1C94C4;
outline: none;
top: -7px;
margin-left: -12px;
}
The Slider Range
The slider range will have a slightly white gradient color.
.ui-slider-range {
background: linear-gradient(top, #ffffff 0%,#eaeaea 100%);
position: absolute;
border: 0;
top: 0;
height: 100%;
border-radius: 25px;
}
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.
var tooltip = $('.tooltip');
Then we define the tooltip’s effect we have mentioned above inside the Slide Event.
slide: function(event, ui) {
var value = slider.slider('value'),
tooltip.css('left', value).text(ui.value);
But, we also want the tooltip to be initially hidden.
tooltip.hide();
After that, when the handle is about to start sliding, it will be shown with a fade-in effect.
start: function(event,ui) {
tooltip.fadeIn('fast');
},
And, when the user stops sliding the handle, the tooltip will fade-out and be hidden.
stop: function(event,ui) {
tooltip.fadeOut('fast');
},
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.
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.
if (value <= 5) {
volume.css('background-position', '0 0');
} else if (value <= 25) {
volume.css('background-position', '0 -25px');
} else if (value <= 75) {
volume.css('background-position', '0 -50px');
} else {
volume.css('background-position', '0 -75px');
}
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.
$(function() {
var slider = $('#slider'),
tooltip = $('.tooltip');
tooltip.hide();
slider.slider({
range: "min",
min: 1,
value: 35,
start: function(event, ui) {
tooltip.fadeIn('fast');
},
slide: function(event, ui) {
var value = slider.slider('value'),
volume = $('.volume');
tooltip.css('left', value).text(ui.value);
if (value <= 5) {
volume.css('background-position', '0 0');
} else if (value <= 25) {
volume.css('background-position', '0 -25px');
} else if (value <= 75) {
volume.css('background-position', '0 -50px');
} else {
volume.css('background-position', '0 -75px');
}
},
stop: function(event, ui) {
tooltip.fadeOut('fast');
}
});
});
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 questions regarding this tutorial, feel free to add them in the comments section below.