--- 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() {

--- a/cms/app-client/app/styles/components/player-sound-control.scss	Tue Dec 20 01:50:35 2016 +0100
+++ b/cms/app-client/app/styles/components/player-sound-control.scss	Tue Dec 20 18:12:12 2016 +0100
@@ -64,103 +64,40 @@
     pointer-events: none;
   }
 
-  // taken from http://brennaobrien.com/blog/2014/05/style-input-type-range-in-every-browser.html
-  // http://danielstern.ca/range.css/#/
   #sound-control-range-wrapper {
-    width: 50px;
-    transform: rotate(270deg) translate(-10px, -12px);
-    -webkit-transform: rotate(270deg) translate(-15px, -19px);
-    -moz-transform: rotate(270deg) translate(-15px, -12px);
-    -ms-transform: rotate(270deg) translate(2px, -8px);
-    transform-origin: 50% 50%;
+    height: 50px;
+    margin-left: 8px;
+  }
+
+
+  .rangeslider--vertical {
+    width: 5px;
+    height: 50px;
+    min-height: 50px;
+    max-height: 100%;
   }
 
-  input[type=range] {
-    -webkit-appearance: none;
-    width: 100%;
-    margin: 3px 3px;
-  }
-  input[type=range]:focus {
-    outline: none;
-  }
-  input[type=range]::-webkit-slider-runnable-track {
-    width: 100%;
-    height: 5px;
-    cursor: pointer;
-    box-shadow: 0px 0px px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0);
-    background: rgba(48, 113, 169, 0.78);
-    border-radius: 1.3px;
-    border: 0.2px solid #010101;
-  }
-  input[type=range]::-webkit-slider-thumb {
-    box-shadow: 0px 0px 0px #000031, 0px 0px 0px #00004b;
-    border: 1px solid #00001e;
+  .rangeslider__handle {
+    width: 11px;
     height: 11px;
-    width: 11px;
-    border-radius: 11px;
-    background: #ffffff;
-    cursor: pointer;
-    -webkit-appearance: none;
-    margin-top: -3.5px;
-    //margin-top: -2px;
-  }
-  input[type=range]:focus::-webkit-slider-runnable-track {
-    background: rgba(106, 163, 213, 0.78);
-  }
-  input[type=range]::-moz-range-track {
-    width: 100%;
-    height: 5px;
-    cursor: pointer;
-    box-shadow: 0px 0px px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0);
-    background: rgba(48, 113, 169, 0.78);
-    border-radius: 1.3px;
-    border: 0.2px solid #010101;
   }
-  input[type=range]::-moz-range-thumb {
-    box-shadow: 0px 0px 0px #000031, 0px 0px 0px #00004b;
-    border: 1px solid #00001e;
-    height: 11px;
-    width: 11px;
-    border-radius: 11px;
-    background: #ffffff;
-    cursor: pointer;
-  }
-  input[type=range]::-ms-track {
-    width: 100%;
+
+  .rangeslider__handle:after {
+    width: 5px;
     height: 5px;
-    cursor: pointer;
-    background: transparent;
-    border-color: transparent;
-    color: transparent;
-  }
-  input[type=range]::-ms-fill-lower {
-    background: rgba(25, 60, 90, 0.78);
-    border: 0.2px solid #010101;
-    border-radius: 2.6px;
-    box-shadow: 0px 0px px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0);
-  }
-  input[type=range]::-ms-fill-upper {
-    background: rgba(48, 113, 169, 0.78);
-    border: 0.2px solid #010101;
-    border-radius: 2.6px;
-    box-shadow: 0px 0px px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0);
-  }
-  input[type=range]::-ms-thumb {
-    box-shadow: 0px 0px 0px #000031, 0px 0px 0px #00004b;
-    border: 1px solid #00001e;
-    height: 11px;
-    width: 11px;
-    border-radius: 11px;
-    background: #ffffff;
-    cursor: pointer;
-  }
-  input[type=range]:focus::-ms-fill-lower {
-    background: rgba(48, 113, 169, 0.78);
-  }
-  input[type=range]:focus::-ms-fill-upper {
-    background: rgba(106, 163, 213, 0.78);
   }
 
+  .rangeslider--vertical .rangeslider__handle {
+    left: -4px
+  }
+
+  .rangeslider__fill {
+    background: $corpus-blue;
+  }
+
+  .rangeslider--disabled {
+    pointer-events: none;
+  }
 
   #sound-control-scale-minus {
     position: absolute;

--- a/cms/app-client/app/templates/components/player-sound-control.hbs	Tue Dec 20 01:50:35 2016 +0100
+++ b/cms/app-client/app/templates/components/player-sound-control.hbs	Tue Dec 20 18:12:12 2016 +0100
@@ -1,17 +1,17 @@
-{{!--<span id="sound-control-speaker" class="fa {{speakerClass}}" {{action 'muteToggle'}} aria-hidden="true"></span>--}}
-<div id="sound-control-speaker" aria-hidden="true"><i class="fa {{speakerClass}}" {{action 'muteToggle'}}></i><i class="fa fa-times" {{action 'muteToggle'}}></i></div>
+<div id="sound-control-speaker" title='mute/unmute'><i class="fa {{speakerClass}}" {{action 'muteToggle'}}></i><i class="fa fa-times" {{action 'muteToggle'}}></i></div>
 <div id="sound-control-scale">
   <div id="sound-control-scale-plus" class="sound-control-scale-indicator" {{ action 'clickPlus' }} disabled={{muted}}>+</div>
-  <div id="sound-control-range-wrapper">
-  {{input
+  <div id="sound-control-range-wrapper" title="volume" >
+  <input
+    id="sound-control-range-slider"
     type="range"
     min="0"
     max="1"
-    step="0.05"
+    step="0.01"
     class="volume-slider"
-    value=volume
-    disabled=muted
-  }}
+    disabled={{ mut muted }}
+    data-orientation="vertical"
+  >
   </div>
   <div id="sound-control-scale-minus" class="sound-control-scale-indicator" {{ action 'clickMinus' }} disabled={{muted}}>-</div>
 </div>

--- a/cms/app-client/bower.json	Tue Dec 20 01:50:35 2016 +0100
+++ b/cms/app-client/bower.json	Tue Dec 20 18:12:12 2016 +0100
@@ -17,6 +17,7 @@
     "urijs": "^1.18.2",
     "leaflet": "^1.0.0",
     "social-share-kit": "^1.0.13",
-    "interval-tree2": "IRI-Research/interval-tree2"
+    "interval-tree2": "IRI-Research/interval-tree2",
+    "rangeslider.js": "^2.3.0"
   }
 }

--- a/cms/app-client/ember-cli-build.js	Tue Dec 20 01:50:35 2016 +0100
+++ b/cms/app-client/ember-cli-build.js	Tue Dec 20 18:12:12 2016 +0100
@@ -49,6 +49,12 @@
       production:  'bower_components/urijs/src/URI.min.js'
     });
     app.import('bower_components/interval-tree2/dist/interval-tree.js');
+    app.import({
+      development: 'bower_components/rangeslider.js/dist/rangeslider.js',
+      production:  'bower_components/rangeslider.js/dist/rangeslider.min.js'
+    });
+    app.import('bower_components/rangeslider.js/dist/rangeslider.css');
+
 
     //shims
     app.import('vendor/shims/ammaps.js', {