Added volume slider to game options.

app/styles/game-menu/options-view.sass

@@ -1,7 +1,7 @@
 @import "app/styles/bootstrap/variables"
 
 #options-view
-  .select-group
+  .select-group, .slider-group
     display: block
     min-height: 20px
     margin-top: 10px
@@ -14,6 +14,9 @@
       margin-right: 20px
       margin-bottom: 0
 
+    .slider
+      width: 200px
+
   .form-group.radio-inline
     input
       margin-left: 0px
@@ -22,6 +25,7 @@
     .radio-inline-parent-label
       padding-left: 0
 
+
   #player-avatar-container
     position: relative
     margin: 0px 0px 15px 15px

app/templates/game-menu/options-view.jade

@@ -8,6 +8,13 @@
 .form
   h3(data-i18n="options.general_options") General Options
 
+  .form-group.slider-group
+    label(for="option-volume")
+      span(data-i18n="options.volume") Volume
+      span.spr :
+      span#option-volume-value= (me.get('volume') * 100).toFixed(0) + '%'
+    #option-volume.slider
+
   .form-group.checkbox
     label(for="option-music")
       input#option-music(name="option-music", type="checkbox", checked=music)

app/views/game-menu/OptionsView.coffee

@@ -48,6 +48,20 @@ module.exports = class OptionsView extends CocoView
 
   afterRender: ->
     super()
+    @volumeSlider = @$el.find('#option-volume').slider(animate: 'fast', min: 0, max: 1, step: 0.05)
+    @volumeSlider.slider('value', me.get('volume'))
+    @volumeSlider.on('slide', @onVolumeSliderChange)
+    @volumeSlider.on('slidechange', @onVolumeSliderChange)
+
+  destroy: ->
+    @volumeSlider?.slider?('destroy')
+    super()
+
+  onVolumeSliderChange: (e) =>
+    volume = @volumeSlider.slider('value')
+    me.set 'volume', volume
+    @$el.find('#option-volume-value').text (volume * 100).toFixed(0) + '%'
+    Backbone.Mediator.publish 'level-set-volume', volume: volume
 
   onHidden: ->
     if @playerName and @playerName isnt me.get('name')