diff --git a/app/components/controls/music-control.js b/app/components/controls/music-control.js
index 1b9cd37..f7292b9 100644
--- a/app/components/controls/music-control.js
+++ b/app/components/controls/music-control.js
@@ -15,6 +15,10 @@ export default Em.Component.extend({
         this.set('status', 'playing');
       }
     },
+    volumeSliderChanged: function(){
+
+    },
+
     next : function(){
 
     },
@@ -36,6 +40,7 @@ export default Em.Component.extend({
   playQueue: [],
   timeElapsed: '0:00',
   timeRemaining: '0:00',
+  volume: 100,
 
   playButton: function(){
     if(this.get('status') === 'playing'){
@@ -85,6 +90,10 @@ export default Em.Component.extend({
 
     kick.on();
 
+    if(localStorage.getItem('huegasm.volume')){
+      this.set('volume', localStorage.getItem('huegasm.volume'));
+    }
+
     this.setProperties({
       dancer: dancer,
       kick: kick
diff --git a/app/styles/app.scss b/app/styles/app.scss
index 5c0d403..437fb1e 100644
--- a/app/styles/app.scss
+++ b/app/styles/app.scss
@@ -213,5 +213,37 @@ md-toolbar {
 #playlist {
   height: 300px;
   background-color: grey;
-  display: inline-block;
+}
+
+.volumeButtonHover {
+
+}
+.noUi-origin {
+  background-color: black;
+}
+
+.noUi-base {
+  background-color: red;
+}
+
+.noUi-target {
+  width: 100px;
+  height: 5px;
+  display: inline-block;
+  visibility: hidden;
+}
+
+.noUi-horizontal .noUi-handle {
+  width: 4px;
+  height: 20px;
+  left: 0;
+  top: -8px;
+}
+
+.noUi-handle:after, .noUi-handle:before {
+  content: none;
+}
+
+.volumeButton:hover + .noUi-target {
+  visibility:visible;
 }
diff --git a/app/templates/components/controls/music-control.hbs b/app/templates/components/controls/music-control.hbs
index 2ae3f94..6d875b1 100644
--- a/app/templates/components/controls/music-control.hbs
+++ b/app/templates/components/controls/music-control.hbs
@@ -12,7 +12,8 @@
           <span {{action "next"}}>{{paper-icon icon="skip-next" action="" class="playerControllIcon"}}</span>
           {{/if}}
 
-          {{paper-icon icon="volume-up"  class="playerControllIcon"}}
+          {{paper-icon icon="volume-up"  class="playerControllIcon volumeButton"}}
+          {{range-slider start=volume min=0 max=100 change="volumeSliderChanged"}}
 
           <span id="playerTimeControls">{{timeElapsed}} / {{timeRemaining}}</span>
 
diff --git a/bower.json b/bower.json
index 04369d4..b800f3b 100644
--- a/bower.json
+++ b/bower.json
@@ -13,6 +13,7 @@
     "hammerjs": "~2.0.4",
     "jquery": "^1.11.1",
     "loader.js": "ember-cli/loader.js#3.2.0",
-    "qunit": "~1.18.0"
+    "qunit": "~1.18.0",
+    "nouislider": "^8.0.1"
   }
 }
diff --git a/package.json b/package.json
index 98cb559..d4c53ae 100644
--- a/package.json
+++ b/package.json
@@ -29,6 +29,7 @@
     "ember-cli-htmlbars-inline-precompile": "^0.1.1",
     "ember-cli-ic-ajax": "0.2.1",
     "ember-cli-inject-live-reload": "^1.3.0",
+    "ember-cli-nouislider": "0.7.0",
     "ember-cli-qunit": "0.3.20",
     "ember-cli-release": "0.2.3",
     "ember-cli-sass": "4.0.1",