<div class="container">
<div class="player">
<div class="controls">
<ul class="control-menu">
<li><a href="#" class="active"><i class="fa fa-random"></i></a></li>
<li><a href="#"><i class="fa fa-repeat"></i></a></li>
<li><a href="#"><i class="fa fa-share-square"></i></a></li>
<li><a href="#" class="heart"><i class="fa fa-heart"></i></a></li>
<li><a href="#"><i class="fa fa-plus"></i></a></li>
</ul>
<ul class="volume-control">
<li><a href="#"><i class="fa fa-volume-up"></i></a></li>
<li>
<div class="slider-wrap">
<div id="slider-vertical" style="height:100px;"></div>
</div>
<input type="text" id="amount" readonly>
</li>
<li><a href="#"><i class="fa fa-volume-down"></i></a></li>
</ul>
<ul class="settings">
<li><a href="#"><i class="fa fa-gear"></i></a></li>
</ul>
</div>
<div class="now-playing">
<div class="now-playing-image">
<div class="now-playing-info">
<h1>Thriller</h1>
<p>by <a href="#">Michael Jackson</a></p>
</div>
<div class="tracking">
<div class="time-spent"><p>2:35</p>
</div>
<div class="tracker">
<span class="slider"></span>
</div>
<div class="time-remaining">
<p>3:25</p>
</div>
</div>
</div>
<div class="now-playing-controls">
<ul>
<li class="previous"><a href="#"><i class="fa fa-step-backward"></i></a></li>
<li class="play"><a href="#"><i class="fa fa-pause"></i></a></li>
<li class="next"><a href="#"><i class="fa fa-step-forward"></i></a></li>
</div>
<div class="credit"><p>Design credit goes to <a href="https://dribbble.com/sananes/" target="_blank">Aaron Sananes.</a> Also, <a href="https://en.wikipedia.org/wiki/Michael_Jackson" target="_blank">Michael Jackson.</a>
</p></div>
@import "compass";
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700);
$url-picture:url('https://d13yacurqjgara.cloudfront.net/users/66124/screenshots/1000207/music_player_1x.png');
$url-site:url('https://dribbble.com/shots/1000207-Music-Player');
* {@include box-sizing(border-box);}
$off-white:rgba(229, 233, 237, 1);
$pink:rgba(253, 104, 96, 1);
$dark-blue:rgba(68, 77, 86, 1);
$darker-blue:rgba(45, 53, 60, 1);
$light-blue:rgba(97, 108, 119, 1);
body {
background:$off-white;
font-family: 'Open Sans', sans-serif;
}
.container {
width:500px;
margin:50px auto;
}
.controls {
background:$dark-blue;
padding:5px 0;
width:40px;
font-size:1.3em;
text-align:center;
float:left;
position:relative;
top:20px;
@include border-radius(5px 0 0 5px);
a {
color:$light-blue;
text-decoration:none;
&:hover {
color:$off-white;
}
&.heart {
color:$pink;
&:hover {
color:lighten($pink, 10%);
}
}
}
.active {
color:$off-white;
}
ul {
list-style-type:none;
padding:0;
margin:0;
}
.volume-control {
background:$light-blue;
a {
color:$dark-blue;
&:hover {
color:$darker-blue;
}
}
.slider-wrap {
height:100px;
width:10px;
margin:0 auto;
border-radius:5px;
}
}
.ui-slider {
position: relative;
text-align: left;
background:$dark-blue;
width:10px;
margin:0 auto;
a {
outline:none;
}
}
.ui-slider .ui-slider-handle {
position: absolute;
z-index: 4;
width: 10px;
height: 10px;
@include border-radius(5px);
cursor: pointer;
-ms-touch-action: none;
touch-action: none;
background:$darker-blue;
}
.ui-slider .ui-slider-range {
position: absolute;
z-index: 1;
font-size: .7em;
display: block;
border: 0;
background-position: 0 0;
background:$darker-blue;
@include border-radius(5px);
cursor:pointer;
}
.ui-slider-vertical {
width: 10px;
height: 100px;
@include border-radius(5px);
}
.ui-slider-vertical .ui-slider-handle {
position:relative;
top:-10px;
margin-left: 0;
}
.ui-slider-vertical .ui-slider-range {
left: 0;
width: 100%;
}
.ui-slider-vertical .ui-slider-range-min {
bottom: 0;
}
.ui-slider-vertical .ui-slider-range-max {
top: 0;
}
}
#amount {
width:25px;
padding:0;
margin:0;
background:$light-blue;
border:0;
color:$off-white;
font-size:0.5em;
text-align:center;
}
.now-playing {
width:300px;
height:400px;
background:white;
float:left;
@include border-radius(5px);
position:relative;
@include box-shadow(0px 0px 10px rgba(black,0.5));
}
.now-playing-image {
background:url('http://upload.wikimedia.org/wikipedia/commons/3/31/Michael_Jackson1_1988.jpg');
background-size:cover;
height:250px;
position:relative;
@include border-radius(5px 5px 0px 0px);
}
.now-playing-info {
text-align:center;
width:100%;
background:rgba($darker-blue,0.7);
padding:10px;
box-sizing:border-box;
position:absolute;
bottom:35px;
h1,p {
margin:0;
padding:0;
color:$off-white;
font-weight:300;
}
p {
font-size:90%;
}
a {
color:$off-white;
&:hover {
color:lighten($off-white,10%);
}
}
}
.tracking {
position:absolute;
bottom:0;
width:100%;
height:35px;
@include clearfix;
background:rgba($darker-blue,0.9);
padding:8px 10px;
}
.time-spent,.tracker,.time-remaining {
text-align:center;
float:left;
p {
color:$off-white;
font-size:80%;
margin:0;
padding:0;
}
}
.time-spent {
margin-right:5px;
}
.time-remaining {
margin-left:5px;
}
.tracker {
width:200px;
background:rgba($darker-blue,1);
height:10px;
@include border-radius(5px);
margin:5px;
.slider {
height:10px;
width:66%;
background:$pink;
display:block;
@include border-radius(5px);
}
}
.now-playing-controls {
@include clearfix;
text-align:center;
margin-top:15px;
padding:20px;
ul {
text-decoration:none;
list-style-type:none;
margin:0;
padding:0;
li {
display:inline-block;
background:$off-white;
position:relative;
a {
display:block;
padding:10px 18px;
color:white;
}
}
.previous,.play,.next {
@include border-radius(100%);
margin:2px;
}
.previous,.next {
font-size:1.5em;
a {
padding:10px 20px;
}
}
.play {
font-size:2em;
position:relative;
a {
padding:20px 30px;
}
}
}
li {
&:hover {
transform: scale(1.05);
a {
background:$light-blue;
@include border-radius(50%);
}
}
}
}
.credit {
margin-top:30px;
}
View Compiled
$(function() {
$( "#slider-vertical" ).slider({
orientation: "vertical",
range: "min",
min: 0,
max: 100,
value: 60,
slide: function( event, ui ) {
$( "#amount" ).val( ui.value );
}
});
$( "#amount" ).val( $( "#slider-vertical" ).slider( "value" ) );
});
