<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;
    }
  }
  // Slider

.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;
//	margin-bottom: -.6em;
}
.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" ) );
  });

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
  2. //cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js