--- a/cms/app-client/app/components/player-sound-control.js	Tue Dec 20 01:50:35 2016 +0100
+++ b/cms/app-client/app/components/player-sound-control.js	Tue Dec 20 18:12:12 2016 +0100
@@ -53,6 +53,23 @@
 
   }),
 
+  mutedObserver: Ember.observer('muted', function() {
+    const rangeslider = this.$("#sound-control-range-slider");
+    if(!rangeslider) {
+      return;
+    }
+    rangeslider.rangeslider('update', true);
+  }),
+
+  volumeObserver: Ember.observer('volume', function() {
+    const rangeslider = this.$("#sound-control-range-slider");
+    const volume = this.get('volume');
+    if(!rangeslider) {
+      return;
+    }
+    rangeslider.val(volume).change();
+  }),
+
   popcornObserver: Ember.observer('popcorn', function() {
     let popcorn = this.get('popcorn');
     if(!popcorn) {
@@ -85,18 +102,31 @@
   },
 
   didInsertElement: function() {
-    this.set('volumeSliderHandler', this.$(".volume-slider").on("input change", (event) => { this.set('volume',Ember.$(event.target).val()); }));
+    const volume = this.get('volume');
+    let rangeslider = this.$('#sound-control-range-slider');
+    rangeslider.rangeslider({
+      polyfill: false,
+      onSlide: (pos, value) => {
+        this.set('volume', value);
+      },
+      onSlideEnd: (pos, value) => {
+        this.set('volume', value);
+      },
+      onInit: function() {
+        Ember.$(this).value = volume;
+      }
+    });
   },
 
   willDestroyElement: function() {
-    let volumeSliderHandler = this.get('volumeSliderHandler');
-    if(volumeSliderHandler) {
-      this.$(".volume-slider").off({"input change": volumeSliderHandler});
-    }
+    this.$('#sound-control-range-slider').rangeslider('destroy');
   },
 
   actions: {
     muteToggle() {
+      if(!this.get('volume')) {
+        return;
+      }
       this.set('muted', !this.get('muted'));
     },
     clickMinus() {