diff --git a/.travis.yml b/.travis.yml
index 762841e..d21c482 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -1,6 +1,6 @@
 language: node_js
 node_js:
-  - 4.4.0
+  - lts/*
   - stable
 install:
   - npm install
diff --git a/app/scripts/App.js b/app/scripts/App.js
index a3fdd68..0cf2415 100644
--- a/app/scripts/App.js
+++ b/app/scripts/App.js
@@ -105,13 +105,28 @@ export default class App extends Component {
               </div>
               <div className="row">
                 <div className="col-md-12 col-xs-12">
-                  <a href="http://facebook.com/SheetMusicTutor" target="_blank" className="btn btn-primary">
+                  <a
+                    href="http://facebook.com/SheetMusicTutor"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="btn btn-primary"
+                  >
                     <i className="fa fa-facebook" />
                   </a>
-                  <a href="http://twitter.com/SheetMusicTutor" target="_blank" className="btn btn-primary">
+                  <a
+                    href="http://twitter.com/SheetMusicTutor"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="btn btn-primary"
+                  >
                     <i className="fa fa-twitter" />
                   </a>
-                  <a href="http://github.com/philippotto/piano-trainer" target="_blank" className="btn btn-primary">
+                  <a
+                    href="http://github.com/philippotto/piano-trainer"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="btn btn-primary"
+                  >
                     <i className="fa fa-github" />
                   </a>
                 </div>
diff --git a/app/scripts/services/pitch_statistic_service.js b/app/scripts/services/pitch_statistic_service.js
index f9ac113..24dc694 100644
--- a/app/scripts/services/pitch_statistic_service.js
+++ b/app/scripts/services/pitch_statistic_service.js
@@ -28,7 +28,9 @@ class PitchStatisticService {
     this.stats = localStorage.getItem(localStoragePitchStatsKey);
 
     if (this.stats) {
-      this.stats = JSON.parse(this.stats).map(this.transformDate).map(StatEvolver.evolveToLatestSchema);
+      this.stats = JSON.parse(this.stats)
+        .map(this.transformDate)
+        .map(StatEvolver.evolveToLatestSchema);
     } else {
       this.stats = [];
     }
@@ -45,7 +47,9 @@ class PitchStatisticService {
   }
 
   getSuccessCount() {
-    return _(this.stats).filter(el => el.success).value().length;
+    return _(this.stats)
+      .filter(el => el.success)
+      .value().length;
   }
 
   rateEvent(event) {
@@ -67,7 +71,10 @@ class PitchStatisticService {
   }
 
   getLastTimes(n = 10) {
-    return this.stats.filter(el => el.success).map(el => el.time).slice(-n);
+    return this.stats
+      .filter(el => el.success)
+      .map(el => el.time)
+      .slice(-n);
   }
 
   computeAverage(array) {
@@ -83,11 +90,18 @@ class PitchStatisticService {
   }
 
   getTotalAmountOfChords() {
-    return _(this.stats).filter(el => el.success).map(el => el.keys).size();
+    return _(this.stats)
+      .filter(el => el.success)
+      .map(el => el.keys)
+      .size();
   }
 
   getTotalAmountOfKeys() {
-    return _(this.stats).filter(el => el.success).map(el => el.keys).flatten().size();
+    return _(this.stats)
+      .filter(el => el.success)
+      .map(el => el.keys)
+      .flatten()
+      .size();
   }
 
   getSuccessRate() {
diff --git a/app/scripts/services/rhythm_statistic_service.js b/app/scripts/services/rhythm_statistic_service.js
index bdf829b..f798f63 100644
--- a/app/scripts/services/rhythm_statistic_service.js
+++ b/app/scripts/services/rhythm_statistic_service.js
@@ -64,7 +64,9 @@ class RhythmStatisticService {
   }
 
   getSuccessCount() {
-    return _(this.stats).filter(el => el.success).value().length;
+    return _(this.stats)
+      .filter(el => el.success)
+      .value().length;
   }
 
   getLastScores(n) {
@@ -72,7 +74,10 @@ class RhythmStatisticService {
   }
 
   getLastTimes(n = 10) {
-    return this.stats.filter(el => el.success).map(el => el.time).slice(-n);
+    return this.stats
+      .filter(el => el.success)
+      .map(el => el.time)
+      .slice(-n);
   }
 
   computeAverage(array) {
@@ -88,7 +93,10 @@ class RhythmStatisticService {
   }
 
   getTotalAmountOfBeats() {
-    return _(this.stats).map(el => el.durations).flatten().size();
+    return _(this.stats)
+      .map(el => el.durations)
+      .flatten()
+      .size();
   }
 
   getTotalRhythmTime() {
diff --git a/app/scripts/views/animated_number.js b/app/scripts/views/animated_number.js
index 294ebc8..6c7cf22 100644
--- a/app/scripts/views/animated_number.js
+++ b/app/scripts/views/animated_number.js
@@ -1,20 +1,18 @@
 import React, { Component } from "react";
+import PropTypes from "prop-types";
 import { Motion, spring } from "react-motion";
 
 export default class AnimatedNumber extends Component {
   static propTypes = {
-    formatter: React.PropTypes.func,
-    number: React.PropTypes.number
+    formatter: PropTypes.func,
+    number: PropTypes.number
   };
   render() {
     const formatter = this.props.formatter;
     const number = this.props.number;
     return (
       <Motion defaultStyle={{ x: 1 }} style={{ x: spring(number) }}>
-        {value =>
-          <span>
-            {formatter ? formatter(value.x) : Math.round(value.x)}
-          </span>}
+        {value => <span>{formatter ? formatter(value.x) : Math.round(value.x)}</span>}
       </Motion>
     );
   }
diff --git a/app/scripts/views/beat_visualization.js b/app/scripts/views/beat_visualization.js
index ce31ea2..252181b 100644
--- a/app/scripts/views/beat_visualization.js
+++ b/app/scripts/views/beat_visualization.js
@@ -1,4 +1,5 @@
 import React, { Component } from "react";
+import PropTypes from "prop-types";
 import classNames from "classnames";
 import _ from "lodash";
 
@@ -6,11 +7,11 @@ import RhythmChecker from "../services/rhythm_checker.js";
 
 export default class BeatVisualization extends Component {
   static propTypes = {
-    settings: React.PropTypes.object.isRequired,
-    barDuration: React.PropTypes.number.isRequired,
-    currentRhythm: React.PropTypes.object.isRequired,
-    beatHistory: React.PropTypes.object.isRequired,
-    result: React.PropTypes.object.isRequired
+    settings: PropTypes.object.isRequired,
+    barDuration: PropTypes.number.isRequired,
+    currentRhythm: PropTypes.object.isRequired,
+    beatHistory: PropTypes.array.isRequired,
+    result: PropTypes.object
   };
 
   convertTicksToBeatNames(tickTime, tickLength) {
@@ -26,11 +27,11 @@ export default class BeatVisualization extends Component {
     const ticks = necessaryBeatNames.slice(tickIndex, tickIndex + tickStepCount);
     return (
       <div className="row center-xs">
-        {ticks.map((beatName, index) =>
+        {ticks.map((beatName, index) => (
           <div className="col-xs" key={index}>
             {beatName}
           </div>
-        )}
+        ))}
       </div>
     );
   }
@@ -52,11 +53,11 @@ export default class BeatVisualization extends Component {
         currentX = x + width;
 
         return [
-          marginLeft > 0
-            ? <div className="beat restBeat" style={{ width: `${marginLeft}%` }} key={"spacer-${index}"}>
-                {beatNamesRest}
-              </div>
-            : null,
+          marginLeft > 0 ? (
+            <div className="beat restBeat" style={{ width: `${marginLeft}%` }} key={"spacer-${index}"}>
+              {beatNamesRest}
+            </div>
+          ) : null,
           <div className={`beat ${color}-beat`} style={{ width: `${width}%` }} key={index}>
             {beatNames}
           </div>
@@ -98,12 +99,8 @@ export default class BeatVisualization extends Component {
     // uniqueId avoids that different beat bars are animated into each other
     return (
       <div key={_.uniqueId()} className={className}>
-        <div className="expectedBeatBar">
-          {expectedBeats}
-        </div>
-        <div className="actualBeatBar">
-          {actualBeats}
-        </div>
+        <div className="expectedBeatBar">{expectedBeats}</div>
+        <div className="actualBeatBar">{actualBeats}</div>
       </div>
     );
   }
diff --git a/app/scripts/views/claviature_view.js b/app/scripts/views/claviature_view.js
index f101a46..db928c6 100644
--- a/app/scripts/views/claviature_view.js
+++ b/app/scripts/views/claviature_view.js
@@ -1,14 +1,15 @@
 import React, { Component } from "react";
+import PropTypes from "prop-types";
 import KeyConverter from "../services/key_converter.js";
 import classNames from "classnames";
 
 export default class ClaviatureView extends Component {
   static propTypes = {
-    desiredKeys: React.PropTypes.array,
-    keySignature: React.PropTypes.string,
-    successCallback: React.PropTypes.func,
-    failureCallback: React.PropTypes.func,
-    disabled: React.PropTypes.bool
+    desiredKeys: PropTypes.array,
+    keySignature: PropTypes.string,
+    successCallback: PropTypes.func,
+    failureCallback: PropTypes.func,
+    disabled: PropTypes.bool
   };
 
   constructor(props, context) {
@@ -20,7 +21,7 @@ export default class ClaviatureView extends Component {
   }
 
   static contextTypes = {
-    isInActiveView: React.PropTypes.bool
+    isInActiveView: PropTypes.bool
   };
 
   isNoteCorrect(noteName) {
@@ -110,9 +111,7 @@ export default class ClaviatureView extends Component {
     ].map(args => this.renderKey.apply(this, args));
     return (
       <div className={classNames({ "scale noSelect": true, noPointerEvents: this.props.disabled })}>
-        <ol>
-          {keys}
-        </ol>
+        <ol>{keys}</ol>
       </div>
     );
   }
diff --git a/app/scripts/views/collapsable_container.js b/app/scripts/views/collapsable_container.js
index 5b022e1..fc1e6ba 100644
--- a/app/scripts/views/collapsable_container.js
+++ b/app/scripts/views/collapsable_container.js
@@ -1,14 +1,15 @@
 import React, { Component } from "react";
+import PropTypes from "prop-types";
 import classNames from "classnames";
 import _ from "lodash";
 
-export default class BeatVisualization extends Component {
+export default class CollapsableContainer extends Component {
   static propTypes = {
-    children: React.PropTypes.node,
-    collapsed: React.PropTypes.bool.isRequired,
-    maxHeight: React.PropTypes.number,
-    freeze: React.PropTypes.bool,
-    className: React.PropTypes.string
+    children: PropTypes.node,
+    collapsed: PropTypes.bool.isRequired,
+    maxHeight: PropTypes.number,
+    freeze: PropTypes.bool,
+    className: PropTypes.string
   };
 
   componentWillReceiveProps(nextProps) {
diff --git a/app/scripts/views/game_button.js b/app/scripts/views/game_button.js
index b41bb44..6bd5b67 100644
--- a/app/scripts/views/game_button.js
+++ b/app/scripts/views/game_button.js
@@ -1,16 +1,17 @@
 import React, { Component } from "react";
+import PropTypes from "prop-types";
 import { Button } from "react-bootstrap";
 
 export default class GameButton extends Component {
   static propTypes = {
-    label: React.PropTypes.string.isRequired,
-    onClick: React.PropTypes.func.isRequired,
-    primary: React.PropTypes.bool,
-    shortcutLetter: React.PropTypes.string
+    label: PropTypes.string.isRequired,
+    onClick: PropTypes.func.isRequired,
+    primary: PropTypes.bool,
+    shortcutLetter: PropTypes.string
   };
 
   static contextTypes = {
-    isInActiveView: React.PropTypes.bool
+    isInActiveView: PropTypes.bool
   };
 
   componentDidMount() {
@@ -38,22 +39,16 @@ export default class GameButton extends Component {
   }
 
   render() {
-    const subtext = this.props.shortcutLetter
-      ? <div>
-          <span style={{ fontSize: 12 }}>
-            Or press '{this.props.shortcutLetter}'
-          </span>
-        </div>
-      : null;
+    const subtext = this.props.shortcutLetter ? (
+      <div>
+        <span style={{ fontSize: 12 }}>Or press &lsquo;{this.props.shortcutLetter}&rsquo;</span>
+      </div>
+    ) : null;
 
     return (
       <Button onClick={this.props.onClick} bsStyle={this.props.primary ? "success" : "default"} className="gameButton">
-        <span className="gameButton-label">
-          {this.props.label}
-        </span>
-        <span className="subtext">
-          {subtext}
-        </span>
+        <span className="gameButton-label">{this.props.label}</span>
+        <span className="subtext">{subtext}</span>
       </Button>
     );
   }
diff --git a/app/scripts/views/level_view.js b/app/scripts/views/level_view.js
index b13eed3..81d4773 100644
--- a/app/scripts/views/level_view.js
+++ b/app/scripts/views/level_view.js
@@ -1,11 +1,12 @@
 import _ from "lodash";
 import React, { Component } from "react";
+import PropTypes from "prop-types";
 import LevelService from "../services/level_service.js";
 import PieChart from "../views/pie_chart.js";
 
 export default class LevelView extends Component {
   static propTypes = {
-    statisticService: React.PropTypes.object.isRequired
+    statisticService: PropTypes.object.isRequired
   };
 
   render() {
@@ -64,9 +65,7 @@ export default class LevelView extends Component {
     return (
       <div>
         {content}
-        <div>
-          Current level: {levelIndex + 2}
-        </div>
+        <div>Current level: {levelIndex + 2}</div>
       </div>
     );
   }
diff --git a/app/scripts/views/metronome_view.js b/app/scripts/views/metronome_view.js
index 3adbf8b..cd242d0 100644
--- a/app/scripts/views/metronome_view.js
+++ b/app/scripts/views/metronome_view.js
@@ -1,4 +1,5 @@
 import React, { Component } from "react";
+import PropTypes from "prop-types";
 import classNames from "classnames";
 import _ from "lodash";
 
@@ -7,9 +8,8 @@ import CollapsableContainer from "./collapsable_container.js";
 
 export default class MetronomeView extends Component {
   static propTypes = {
-    onMetronomeEnded: React.PropTypes.func,
-    settings: React.PropTypes.object.isRequired,
-    statisticService: React.PropTypes.object.isRequired
+    onMetronomeEnded: PropTypes.func,
+    settings: PropTypes.object.isRequired
   };
 
   constructor(props, context) {
@@ -65,9 +65,7 @@ export default class MetronomeView extends Component {
           opacityOut: (this.state.currentMetronomeBeat + 1) % 4 === 0
         })}
       >
-        <h2>
-          {this.state.currentMetronomeBeat + 1}
-        </h2>
+        <h2>{this.state.currentMetronomeBeat + 1}</h2>
       </CollapsableContainer>
     );
   }
diff --git a/app/scripts/views/newsletter_form.js b/app/scripts/views/newsletter_form.js
index b741216..002178d 100644
--- a/app/scripts/views/newsletter_form.js
+++ b/app/scripts/views/newsletter_form.js
@@ -5,7 +5,7 @@ export default class NewsLetterForm extends Component {
     // This avoids that global keyhandlers for keyboard navigation are triggered
     // when email input is used.
     const dontPropagate = evt => evt.stopPropagation();
-    const email = this.refs.email;
+    const email = this.email;
     email.addEventListener("keypress", dontPropagate);
     email.addEventListener("keyup", dontPropagate);
     email.addEventListener("keydown", dontPropagate);
@@ -32,10 +32,10 @@ export default class NewsLetterForm extends Component {
                     name="EMAIL"
                     id="mce-EMAIL"
                     placeholder="your@email.com"
-                    ref="email"
+                    ref={c => {
+                      this.email = c;
+                    }}
                     className="form-control"
-                    groupClassName="group-class"
-                    labelClassName="label-class"
                   />
                 </div>
               </div>
diff --git a/app/scripts/views/pie_chart.js b/app/scripts/views/pie_chart.js
index 5f24d3e..5650e82 100644
--- a/app/scripts/views/pie_chart.js
+++ b/app/scripts/views/pie_chart.js
@@ -1,24 +1,30 @@
 import Chartist from "Chartist";
-import React, { Component } from "react";
-import PureRenderMixin from "react-addons-pure-render-mixin";
+import PropTypes from "prop-types";
+import React, { PureComponent } from "react";
 
-export default class LevelView extends Component {
+export default class PieChart extends PureComponent {
   static propTypes = {
-    pieParts: React.PropTypes.array.isRequired
+    pieParts: PropTypes.array.isRequired
   };
 
   constructor(props, context) {
     super(props, context);
-    this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
   }
 
   render() {
-    return <div ref="chart" className="semi-transparent ct-chart ct-major-eleventh" />;
+    return (
+      <div
+        ref={c => {
+          this.chart = c;
+        }}
+        className="semi-transparent ct-chart ct-major-eleventh"
+      />
+    );
   }
 
   componentDidUpdate() {
     new Chartist.Pie(
-      this.refs.chart,
+      this.chart,
       {
         series: this.props.pieParts
       },
diff --git a/app/scripts/views/pitch_reading_view.js b/app/scripts/views/pitch_reading_view.js
index e5f145e..0cee583 100644
--- a/app/scripts/views/pitch_reading_view.js
+++ b/app/scripts/views/pitch_reading_view.js
@@ -1,4 +1,5 @@
 import React, { Component } from "react";
+import PropTypes from "prop-types";
 import classNames from "classnames";
 import _ from "lodash";
 
@@ -17,13 +18,13 @@ const successMp3Url = require("file!../../resources/success.mp3");
 
 export default class PitchReadingView extends Component {
   static propTypes = {
-    statisticService: React.PropTypes.object.isRequired,
-    settings: React.PropTypes.object.isRequired,
-    isActive: React.PropTypes.bool.isRequired
+    statisticService: PropTypes.object.isRequired,
+    settings: PropTypes.object.isRequired,
+    isActive: PropTypes.bool.isRequired
   };
 
   static childContextTypes = {
-    isInActiveView: React.PropTypes.bool
+    isInActiveView: PropTypes.bool
   };
 
   getChildContext() {
@@ -140,15 +141,15 @@ export default class PitchReadingView extends Component {
     const isMidiAvailable = this.props.settings.midi.inputs.get().length > 0;
     const noErrors = this.state.errorMessage !== null;
     const miniClaviature =
-      isMidiAvailable && noErrors
-        ? null
-        : <ClaviatureView
-            desiredKeys={this.getAllCurrentKeys()}
-            keySignature={this.state.currentKeySignature}
-            successCallback={this.onSuccess.bind(this)}
-            failureCallback={this.onFailure.bind(this)}
-            disabled={!this.state.running}
-          />;
+      isMidiAvailable && noErrors ? null : (
+        <ClaviatureView
+          desiredKeys={this.getAllCurrentKeys()}
+          keySignature={this.state.currentKeySignature}
+          successCallback={this.onSuccess.bind(this)}
+          failureCallback={this.onFailure.bind(this)}
+          disabled={!this.state.running}
+        />
+      );
 
     const startStopButton = (
       <GameButton
@@ -225,9 +226,7 @@ export default class PitchReadingView extends Component {
                       hide: this.state.errorMessage === null
                     })}
                   >
-                    <h3>
-                      {this.state.errorMessage}
-                    </h3>
+                    <h3>{this.state.errorMessage}</h3>
                   </div>
                 </div>
               </CollapsableContainer>
@@ -237,7 +236,15 @@ export default class PitchReadingView extends Component {
             <PitchSettingsView settings={this.props.settings} />
             <PitchStatisticView statisticService={this.props.statisticService} settings={this.props.settings} />
           </div>
-          <audio ref="successPlayer" hidden="true" src={successMp3Url} controls preload="auto" autobuffer />
+          <audio
+            ref={c => {
+              this.successPlayer = c;
+            }}
+            hidden="true"
+            src={successMp3Url}
+            controls
+            preload="auto"
+          />
         </div>
       </div>
     );
@@ -297,7 +304,7 @@ export default class PitchReadingView extends Component {
   }
 
   playSuccessSound() {
-    this.refs.successPlayer.play();
+    this.successPlayer.play();
   }
 
   onFailure() {
diff --git a/app/scripts/views/pitch_settings_view.js b/app/scripts/views/pitch_settings_view.js
index 3043eb7..1cb103e 100644
--- a/app/scripts/views/pitch_settings_view.js
+++ b/app/scripts/views/pitch_settings_view.js
@@ -1,4 +1,5 @@
 import React, { Component } from "react";
+import PropTypes from "prop-types";
 import RangeSettingComponent from "./range_setting_component";
 import SettingLine from "./setting_line";
 import KeyConverter from "../services/key_converter";
@@ -8,7 +9,7 @@ import AnalyticsService from "../services/analytics_service.js";
 
 export default class PitchSettingsView extends Component {
   static propTypes = {
-    settings: React.PropTypes.object
+    settings: PropTypes.object
   };
 
   constructor(props, context) {
@@ -42,31 +43,33 @@ export default class PitchSettingsView extends Component {
   }
 
   onMidiSelectChange() {
-    AppFreezer.trigger("input:changed", parseInt(this.refs.midiSelect.value, 10));
+    AppFreezer.trigger("input:changed", parseInt(this.midiSelect.value, 10));
   }
 
   render() {
     const midiSettings = this.props.settings.midi;
     const midiInputs = midiSettings.inputs.get();
     const isMidiAvailable = midiInputs.length > 0;
-    const deviceSelector = !isMidiAvailable
-      ? null
-      : <SettingLine label="Midi device">
-          <select
-            name="select"
-            onChange={this.onMidiSelectChange.bind(this)}
-            defaultValue={midiSettings.currentInput}
-            ref="midiSelect"
-          >
-            {midiInputs.map((el, index) => {
-              return (
-                <option value={index} key={index}>
-                  Device {index + 1}
-                </option>
-              );
-            })}
-          </select>
-        </SettingLine>;
+    const deviceSelector = !isMidiAvailable ? null : (
+      <SettingLine label="Midi device">
+        <select
+          name="select"
+          onChange={this.onMidiSelectChange.bind(this)}
+          defaultValue={midiSettings.currentInput}
+          ref={c => {
+            this.midiSelect = c;
+          }}
+        >
+          {midiInputs.map((el, index) => {
+            return (
+              <option value={index} key={index}>
+                Device {index + 1}
+              </option>
+            );
+          })}
+        </select>
+      </SettingLine>
+    );
 
     const useAutomaticDifficulty = this.props.settings.useAutomaticDifficulty;
 
@@ -86,7 +89,7 @@ export default class PitchSettingsView extends Component {
         <RangeSettingComponent
           rangeMin={50}
           rangeMax={99}
-          values={this.props.settings.automaticDifficulty.accuracyGoal * 100}
+          values={parseInt(this.props.settings.automaticDifficulty.accuracyGoal * 100, 10)}
           onChange={value => accuracyStateChanger(value / 100)}
           valueToString={el => `${el}%`}
           label={"Accuracy goal"}
@@ -94,7 +97,7 @@ export default class PitchSettingsView extends Component {
         <RangeSettingComponent
           rangeMin={10}
           rangeMax={100}
-          values={this.props.settings.automaticDifficulty.newNotesShare * 100}
+          values={parseInt(this.props.settings.automaticDifficulty.newNotesShare * 100, 10)}
           onChange={value => newNotesShareStateChanger(value / 100)}
           valueToString={el => `${el}%`}
           label={"Share of new notes"}
@@ -107,7 +110,10 @@ export default class PitchSettingsView extends Component {
         <RangeSettingComponent
           rangeMin={1}
           rangeMax={5}
-          values={this.props.settings.chordSizeRanges.treble}
+          values={{
+            from: this.props.settings.chordSizeRanges.treble[0],
+            to: this.props.settings.chordSizeRanges.treble[1]
+          }}
           onChange={this.buildStateChanger("chordSizeRanges.treble")}
           label={"Treble notes/chord"}
           disabled={!isMidiAvailable}
@@ -115,7 +121,10 @@ export default class PitchSettingsView extends Component {
         <RangeSettingComponent
           rangeMin={1}
           rangeMax={5}
-          values={this.props.settings.chordSizeRanges.bass}
+          values={{
+            from: this.props.settings.chordSizeRanges.bass[0],
+            to: this.props.settings.chordSizeRanges.bass[1]
+          }}
           onChange={this.buildStateChanger("chordSizeRanges.bass")}
           label={"Bass notes/chord"}
           disabled={!isMidiAvailable}
@@ -123,7 +132,10 @@ export default class PitchSettingsView extends Component {
         <RangeSettingComponent
           rangeMin={0}
           rangeMax={14}
-          values={this.props.settings.keySignature}
+          values={{
+            from: this.props.settings.keySignature[0],
+            to: this.props.settings.keySignature[1]
+          }}
           onChange={this.buildStateChanger("keySignature")}
           valueToString={KeyConverter.keySignatureValueToString}
           label={"Signature"}
diff --git a/app/scripts/views/pitch_statistic_view.js b/app/scripts/views/pitch_statistic_view.js
index 3d9618e..e120342 100644
--- a/app/scripts/views/pitch_statistic_view.js
+++ b/app/scripts/views/pitch_statistic_view.js
@@ -1,5 +1,6 @@
 import Chartist from "Chartist";
 import React, { Component } from "react";
+import PropTypes from "prop-types";
 import { Tooltip, OverlayTrigger } from "react-bootstrap";
 import LevelView from "./level_view.js";
 import CollapsableContainer from "./collapsable_container.js";
@@ -9,8 +10,8 @@ import StarAnimation from "./star_animation.js";
 
 export default class PitchStatisticView extends Component {
   static propTypes = {
-    statisticService: React.PropTypes.object.isRequired,
-    settings: React.PropTypes.object.isRequired
+    statisticService: PropTypes.object.isRequired,
+    settings: PropTypes.object.isRequired
   };
 
   render() {
@@ -21,7 +22,12 @@ export default class PitchStatisticView extends Component {
 
     return (
       <div className="graph-stats content-box">
-        <div ref="chart" className="semi-transparent ct-chart ct-major-eleventh" />
+        <div
+          ref={c => {
+            this.chart = c;
+          }}
+          className="semi-transparent ct-chart ct-major-eleventh"
+        />
 
         <div className="row around-xs">
           <div className="col-xs">
@@ -90,8 +96,8 @@ export default class PitchStatisticView extends Component {
       }
     };
 
-    if (statistics.getSuccessCount() > 1) {
-      Chartist.Line(this.refs.chart, data, options);
+    if (this.chart && statistics.getSuccessCount() > 1) {
+      Chartist.Line(this.chart, data, options);
     }
   }
 }
diff --git a/app/scripts/views/privacy_policy_modal.js b/app/scripts/views/privacy_policy_modal.js
index 6bb551e..586589d 100644
--- a/app/scripts/views/privacy_policy_modal.js
+++ b/app/scripts/views/privacy_policy_modal.js
@@ -1,9 +1,10 @@
 import React, { Component } from "react";
+import PropTypes from "prop-types";
 import { Modal, Button } from "react-bootstrap";
 
 export default class PrivacyPolicyModal extends Component {
   static propTypes = {
-    onHide: React.PropTypes.func.isRequired
+    onHide: PropTypes.func.isRequired
   };
 
   render() {
diff --git a/app/scripts/views/range_setting_component.js b/app/scripts/views/range_setting_component.js
index 48794d7..e6c7bf2 100644
--- a/app/scripts/views/range_setting_component.js
+++ b/app/scripts/views/range_setting_component.js
@@ -1,11 +1,10 @@
-import React, { Component, PropTypes } from "react";
-import RangeSlider from "react-range-slider-bem";
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+import { Range } from "rc-slider";
 import SettingLine from "./setting_line";
 import _ from "lodash";
 
-const multiplier = 10;
-
-export default class SettingsView extends Component {
+export default class RangeSettingComponent extends Component {
   static defaultProps = {
     valueToString: _.identity,
     label: ""
@@ -14,7 +13,13 @@ export default class SettingsView extends Component {
   static propTypes = {
     rangeMin: PropTypes.number.isRequired,
     rangeMax: PropTypes.number.isRequired,
-    values: PropTypes.array,
+    values: PropTypes.oneOfType([
+      PropTypes.shape({
+        from: PropTypes.number,
+        to: PropTypes.number
+      }),
+      PropTypes.number
+    ]).isRequired,
     onChange: PropTypes.func.isRequired,
     label: PropTypes.string,
     valueToString: PropTypes.func,
@@ -23,62 +28,54 @@ export default class SettingsView extends Component {
 
   constructor(props, context) {
     super(props, context);
-    this.receiveValueAsProps(this.props);
-  }
-
-  receiveValueAsProps(props) {
-    let values = _.isArray(props.values) ? props.values : [props.values];
     this.state = {
-      values: values.map(el => el * multiplier)
+      values: this.convertValues(this.props.values)
     };
   }
 
-  componentWillReceiveProps(newProps) {
-    this.receiveValueAsProps(newProps);
+  /**
+   * Converts values recieved as props to expected form for state
+   *
+   * @param {number | {from: number, to: number}} values
+   * @returns {number[]}
+   */
+  convertValues(values) {
+    return typeof values === "object" ? [values.from, values.to] : [values];
   }
 
-  onChange(event, index, values) {
+  componentWillReceiveProps(newProps) {
     this.setState({
-      values: values.map(el => el.value)
+      values: this.convertValues(newProps.values)
     });
   }
 
-  onAfterChange() {
-    if (this.props.disabled) {
-      return;
-    }
-    let newValues = this.state.values.map(this.quantitizeValue).map(el => el / multiplier);
-    this.props.onChange(newValues.length === 1 ? newValues[0] : newValues);
+  onChange(values) {
+    this.setState({
+      values: values
+    });
   }
 
-  quantitizeValue(value) {
-    return Math.round(value / multiplier) * multiplier;
+  onAfterChange(values) {
+    this.props.onChange(values.length === 1 ? values[0] : values);
   }
 
   render() {
-    const upscaledRangeMin = this.props.rangeMin * multiplier;
-    const upscaledRangeMax = this.props.rangeMax * multiplier;
-
-    let renderedRangeValues = this.state.values;
-    let quantitizedValues = this.state.values.map(this.quantitizeValue);
-
-    const downScaledValues = quantitizedValues.map(el => Math.round(el / multiplier));
     const rangeContainerStyle = {
       marginBottom: -2
     };
 
-    const valueLabel = this.props.label + ": " + downScaledValues.map(this.props.valueToString).join(" - ");
+    const valueLabel = this.props.label + ": " + this.state.values.map(this.props.valueToString).join(" - ");
 
     return (
       <SettingLine label={valueLabel}>
         <div style={rangeContainerStyle}>
-          <RangeSlider
-            cursor
-            value={renderedRangeValues}
-            min={upscaledRangeMin}
-            max={upscaledRangeMax}
+          <Range
+            value={this.state.values}
+            min={this.props.rangeMin}
+            max={this.props.rangeMax}
             onChange={this.onChange.bind(this)}
             onAfterChange={this.onAfterChange.bind(this)}
+            allowCross={false}
             disabled={this.props.disabled}
           />
         </div>
diff --git a/app/scripts/views/rhythm_reading_view.js b/app/scripts/views/rhythm_reading_view.js
index 536ba5b..d3d8a0a 100644
--- a/app/scripts/views/rhythm_reading_view.js
+++ b/app/scripts/views/rhythm_reading_view.js
@@ -1,4 +1,5 @@
 import React, { Component } from "react";
+import PropTypes from "prop-types";
 import classNames from "classnames";
 
 import BarGenerator from "../services/bar_generator.js";
@@ -24,9 +25,9 @@ const Phases = {
 
 export default class RhythmReadingView extends Component {
   static propTypes = {
-    settings: React.PropTypes.object.isRequired,
-    statisticService: React.PropTypes.object.isRequired,
-    isActive: React.PropTypes.bool.isRequired
+    settings: PropTypes.object.isRequired,
+    statisticService: PropTypes.object.isRequired,
+    isActive: PropTypes.bool.isRequired
   };
 
   constructor(props, context) {
@@ -42,7 +43,7 @@ export default class RhythmReadingView extends Component {
   }
 
   static childContextTypes = {
-    isInActiveView: React.PropTypes.bool
+    isInActiveView: PropTypes.bool
   };
 
   getChildContext() {
@@ -53,7 +54,7 @@ export default class RhythmReadingView extends Component {
 
   componentDidUpdate(prevProps, prevState) {
     if (this.state.phase === Phases.running && prevState.phase !== Phases.running) {
-      this.refs.metronome.playMetronome();
+      this.metronome.playMetronome();
     } else {
       console.log("not running");
     }
@@ -98,7 +99,7 @@ export default class RhythmReadingView extends Component {
     // we will add the up event to the beatHistory
     const lastBeat = this.beatHistory.slice(-1)[0];
     if (lastBeat.length === 1) {
-      const firstBarBeatTime = this.refs.metronome.getFirstBarBeatTime();
+      const firstBarBeatTime = this.metronome.getFirstBarBeatTime();
       lastBeat.push(performance.now() - firstBarBeatTime);
     }
   }
@@ -124,7 +125,7 @@ export default class RhythmReadingView extends Component {
           return;
         }
         // protocol beat
-        const firstBarBeatTime = this.refs.metronome.getFirstBarBeatTime();
+        const firstBarBeatTime = this.metronome.getFirstBarBeatTime();
         const newBeatTime = performance.now() - firstBarBeatTime;
         lastSpaceEvent = eventType;
 
@@ -207,8 +208,8 @@ export default class RhythmReadingView extends Component {
         <h3>Welcome to this rhythm training!</h3>
         <p>
           When you start the training, we will count in for 4 beats and afterwards you can tap the given rhythm (either
-          use your 'space' button or your touchscreen). Make sure your speakers are on so that you can hear the
-          metronome.
+          use your &lsquo;space&rsquo; button or your touchscreen). Make sure your speakers are on so that you can hear
+          the metronome.
         </p>
       </CollapsableContainer>
     );
@@ -253,23 +254,27 @@ export default class RhythmReadingView extends Component {
     const metronomeBeat = (
       <MetronomeView
         settings={this.props.settings}
-        ref="metronome"
+        ref={c => {
+          this.metronome = c;
+        }}
         onMetronomeEnded={this.onMetronomeEnded.bind(this)}
       />
     );
 
     const buttons =
-      this.state.phase !== Phases.feedback
-        ? <GameButton label="Start training" shortcutLetter="s" primary onClick={this.nextBar.bind(this)} />
-        : this.state.result.success
-          ? <div>
-              <GameButton label="Repeat this bar" shortcutLetter="r" onClick={this.repeatBar.bind(this)} />
-              <GameButton label="Start next bar" shortcutLetter="s" onClick={this.nextBar.bind(this)} primary />
-            </div>
-          : <div>
-              <GameButton label="Repeat this bar" shortcutLetter="r" onClick={this.repeatBar.bind(this)} primary />
-              <GameButton label="Skip this bar" shortcutLetter="s" onClick={this.nextBar.bind(this)} />
-            </div>;
+      this.state.phase !== Phases.feedback ? (
+        <GameButton label="Start training" shortcutLetter="s" primary onClick={this.nextBar.bind(this)} />
+      ) : this.state.result.success ? (
+        <div>
+          <GameButton label="Repeat this bar" shortcutLetter="r" onClick={this.repeatBar.bind(this)} />
+          <GameButton label="Start next bar" shortcutLetter="s" onClick={this.nextBar.bind(this)} primary />
+        </div>
+      ) : (
+        <div>
+          <GameButton label="Repeat this bar" shortcutLetter="r" onClick={this.repeatBar.bind(this)} primary />
+          <GameButton label="Skip this bar" shortcutLetter="s" onClick={this.nextBar.bind(this)} />
+        </div>
+      );
 
     return (
       <div className={classNames({ trainer: true, trainerHidden2: !this.props.isActive })}>
@@ -293,9 +298,7 @@ export default class RhythmReadingView extends Component {
 
                 <CollapsableContainer collapsed={this.state.phase === Phases.running}>
                   <div className="row center-xs" style={{ marginTop: 20 }}>
-                    <div className="col-xs-12">
-                      {buttons}
-                    </div>
+                    <div className="col-xs-12">{buttons}</div>
                   </div>
                 </CollapsableContainer>
               </div>
diff --git a/app/scripts/views/rhythm_settings_view.js b/app/scripts/views/rhythm_settings_view.js
index dfcac1a..f6a3e0e 100644
--- a/app/scripts/views/rhythm_settings_view.js
+++ b/app/scripts/views/rhythm_settings_view.js
@@ -1,18 +1,17 @@
 import React, { Component } from "react";
-import PureRenderMixin from "react-addons-pure-render-mixin";
+import PropTypes from "prop-types";
 import RangeSettingComponent from "./range_setting_component";
 import SettingLine from "./setting_line";
 import AnalyticsService from "../services/analytics_service.js";
 import _ from "lodash";
 
-export default class PitchSettingsView extends Component {
+export default class RythmSettingsView extends Component {
   static propTypes = {
-    settings: React.PropTypes.object
+    settings: PropTypes.object
   };
 
   constructor(props, context) {
     super(props, context);
-    this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
   }
 
   buildStateChanger(stateKey) {
diff --git a/app/scripts/views/rhythm_statistic_view.js b/app/scripts/views/rhythm_statistic_view.js
index e6a71e9..1525224 100644
--- a/app/scripts/views/rhythm_statistic_view.js
+++ b/app/scripts/views/rhythm_statistic_view.js
@@ -1,20 +1,19 @@
 import Chartist from "Chartist";
 import React, { Component } from "react";
+import PropTypes from "prop-types";
 import { Tooltip, OverlayTrigger } from "react-bootstrap";
 import _ from "lodash";
 
 import AnimatedNumber from "./animated_number.js";
 import StarAnimation from "./star_animation.js";
-import PureRenderMixin from "react-addons-pure-render-mixin";
 
 export default class RhythmStatisticView extends Component {
   static propTypes = {
-    statisticService: React.PropTypes.object.isRequired
+    statisticService: PropTypes.object.isRequired
   };
 
   constructor(props) {
     super(props);
-    this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
   }
 
   getHumanReadableTime(milliseconds) {
@@ -25,19 +24,19 @@ export default class RhythmStatisticView extends Component {
         unit: "y"
       },
       {
-        amount: Math.floor(seconds % 31536000 / 86400),
+        amount: Math.floor((seconds % 31536000) / 86400),
         unit: "d"
       },
       {
-        amount: Math.floor(seconds % 31536000 % 86400 / 3600),
+        amount: Math.floor(((seconds % 31536000) % 86400) / 3600),
         unit: "h"
       },
       {
-        amount: Math.floor(seconds % 31536000 % 86400 % 3600 / 60),
+        amount: Math.floor((((seconds % 31536000) % 86400) % 3600) / 60),
         unit: "m"
       },
       {
-        amount: seconds % 31536000 % 86400 % 3600 % 60,
+        amount: (((seconds % 31536000) % 86400) % 3600) % 60,
         unit: "s"
       }
     ]
@@ -68,7 +67,12 @@ export default class RhythmStatisticView extends Component {
 
     return (
       <div className="graph-stats content-box">
-        <div ref="chart" className="semi-transparent ct-chart ct-major-eleventh" />
+        <div
+          ref={c => {
+            this.chart = c;
+          }}
+          className="semi-transparent ct-chart ct-major-eleventh"
+        />
         <div className="row around-xs">
           <div className="col-xs">
             <OverlayTrigger placement="top" overlay={<Tooltip id="avgTime">Your current score</Tooltip>}>
@@ -144,8 +148,8 @@ export default class RhythmStatisticView extends Component {
       }
     };
 
-    if (scoreDevelopmentValues.length > 1) {
-      Chartist.Line(this.refs.chart, data, options);
+    if (this.chart && scoreDevelopmentValues.length > 1) {
+      Chartist.Line(this.chart, data, options);
     }
   }
 }
diff --git a/app/scripts/views/setting_line.js b/app/scripts/views/setting_line.js
index 16fc93c..52013af 100644
--- a/app/scripts/views/setting_line.js
+++ b/app/scripts/views/setting_line.js
@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from "react";
+import React, { Component } from "react";
+import PropTypes from "prop-types";
 
 export default class SettingLine extends Component {
   static defaultProps = {
@@ -25,9 +26,7 @@ export default class SettingLine extends Component {
         <div className="col-lg-6 col-md-6 col-sm-6 col-xs-12" style={{ textAlign: "left" }}>
           {this.props.label}
         </div>
-        <div className="settingUI col-lg-6 col-md-6 col-sm-6 col-xs-12">
-          {this.props.children}
-        </div>
+        <div className="settingUI col-lg-6 col-md-6 col-sm-6 col-xs-12">{this.props.children}</div>
       </div>
     );
   }
diff --git a/app/scripts/views/star_animation.js b/app/scripts/views/star_animation.js
index 2f678f4..8b49f5a 100644
--- a/app/scripts/views/star_animation.js
+++ b/app/scripts/views/star_animation.js
@@ -1,8 +1,9 @@
 import React, { Component } from "react";
+import PropTypes from "prop-types";
 
 export default class StarAnimation extends Component {
   static propTypes = {
-    number: React.PropTypes.number
+    number: PropTypes.number
   };
 
   constructor() {
diff --git a/app/scripts/views/stave_renderer.js b/app/scripts/views/stave_renderer.js
index 36a2fc5..027817b 100644
--- a/app/scripts/views/stave_renderer.js
+++ b/app/scripts/views/stave_renderer.js
@@ -1,27 +1,33 @@
 import Vex from "vexflow";
-import React, { Component } from "react";
+import React, { PureComponent } from "react";
+import PropTypes from "prop-types";
 import _ from "lodash";
-import PureRenderMixin from "react-addons-pure-render-mixin";
 
-class StaveRenderer extends Component {
+class StaveRenderer extends PureComponent {
   static defaultProps = {
     staveCount: 2
   };
 
   static propTypes = {
-    keys: React.PropTypes.array,
-    chordIndex: React.PropTypes.number,
-    keySignature: React.PropTypes.string,
-    staveCount: React.PropTypes.number
+    keys: PropTypes.objectOf(PropTypes.array),
+    chordIndex: PropTypes.number,
+    keySignature: PropTypes.string,
+    staveCount: PropTypes.number
   };
 
   constructor(props) {
     super(props);
-    this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
   }
 
   render() {
-    return <canvas ref="canvas" id="canvas" />;
+    return (
+      <canvas
+        ref={c => {
+          this.canvas = c;
+        }}
+        id="canvas"
+      />
+    );
   }
 
   componentDidUpdate() {
@@ -60,7 +66,7 @@ class StaveRenderer extends Component {
   }
 
   draw() {
-    const canvas = this.refs.canvas;
+    const canvas = this.canvas;
     this.renderer = new Vex.Flow.Renderer(canvas, Vex.Flow.Renderer.Backends.CANVAS);
     this.ctx = this.renderer.getContext();
 
@@ -79,10 +85,16 @@ class StaveRenderer extends Component {
     this.setCanvasExtent(canvas, width, height, ratio);
 
     const rightHandStave = new Vex.Flow.Stave(10, 0, staveWidth);
-    rightHandStave.addClef("treble").setKeySignature(this.props.keySignature).setContext(ctx);
+    rightHandStave
+      .addClef("treble")
+      .setKeySignature(this.props.keySignature)
+      .setContext(ctx);
 
     const leftHandStave = new Vex.Flow.Stave(10, 80, staveWidth);
-    leftHandStave.addClef("bass").setKeySignature(this.props.keySignature).setContext(ctx);
+    leftHandStave
+      .addClef("bass")
+      .setKeySignature(this.props.keySignature)
+      .setContext(ctx);
 
     this.colorizeKeys();
 
diff --git a/app/styles/chartist_modifications.less b/app/styles/chartist_modifications.less
index c35d793..51663e9 100644
--- a/app/styles/chartist_modifications.less
+++ b/app/styles/chartist_modifications.less
@@ -1,6 +1,9 @@
 /* override chartist color */
 
-.ct-chart .ct-series.ct-series-a .ct-bar, .ct-chart .ct-series.ct-series-a .ct-line, .ct-chart .ct-series.ct-series-a .ct-point, .ct-chart .ct-series.ct-series-a .ct-slice.ct-donut {
+.ct-chart .ct-series.ct-series-a .ct-bar,
+.ct-chart .ct-series.ct-series-a .ct-line,
+.ct-chart .ct-series.ct-series-a .ct-point,
+.ct-chart .ct-series.ct-series-a .ct-slice.ct-donut {
   stroke: #333 !important;
 }
 
@@ -21,7 +24,6 @@
   stroke-width: 6px;
 }
 
-
 .graph-stats .ct-slice-donut {
   stroke: #449d44;
 }
diff --git a/app/styles/checkbox.css b/app/styles/checkbox.css
index 8414f78..6a85b53 100644
--- a/app/styles/checkbox.css
+++ b/app/styles/checkbox.css
@@ -1,4 +1,4 @@
-input[type=checkbox] {
+input[type="checkbox"] {
   visibility: hidden;
 }
 
@@ -11,23 +11,30 @@ input[type=checkbox] {
   top: 0;
   border-radius: 4px;
 
-  -webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,.4);
-  -moz-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,.4);
-  box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,.4);
+  -webkit-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5),
+    0px 1px 0px rgba(255, 255, 255, 0.4);
+  -moz-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5),
+    0px 1px 0px rgba(255, 255, 255, 0.4);
+  box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5),
+    0px 1px 0px rgba(255, 255, 255, 0.4);
 
   background: -webkit-linear-gradient(top, #222 0%, #45484d 100%);
   background: -moz-linear-gradient(top, #222 0%, #45484d 100%);
   background: -o-linear-gradient(top, #222 0%, #45484d 100%);
   background: -ms-linear-gradient(top, #222 0%, #45484d 100%);
   background: linear-gradient(top, #222 0%, #45484d 100%);
-  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#222', endColorstr='#45484d',GradientType=0 );
+  filter: progid:DXImageTransform.Microsoft.gradient(
+      startColorstr="#222",
+      endColorstr="#45484d",
+      GradientType=0
+    );
 }
 
 .setting_checkbox label:after {
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
-  content: '';
+  content: "";
   position: absolute;
   width: 8px;
   height: 5px;
@@ -51,9 +58,8 @@ input[type=checkbox] {
   opacity: 0.3;
 }
 
-.setting_checkbox input[type=checkbox]:checked + label:after {
+.setting_checkbox input[type="checkbox"]:checked + label:after {
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
 }
-
diff --git a/app/styles/claviature.less b/app/styles/claviature.less
index 06064fb..a6f63b1 100644
--- a/app/styles/claviature.less
+++ b/app/styles/claviature.less
@@ -8,22 +8,22 @@
     top: 0px;
     z-index: 1;
     font-size: 1.5rem;
-    background: linear-gradient(to bottom, #F3F3F3, #f0f0f0 10%, #FBFAFA);
+    background: linear-gradient(to bottom, #f3f3f3, #f0f0f0 10%, #fbfafa);
     transition: all 0.1s ease-in-out;
     margin: 0;
     display: inline-block;
     border: 1px solid #ccc;
     padding: 160px 15px 50px;
     border-radius: 0 0 5px 5px;
-    box-shadow: 0 3px 3px rgba(170, 170, 170, 0.50);
+    box-shadow: 0 3px 3px rgba(170, 170, 170, 0.5);
     position: relative;
     cursor: pointer;
     color: rgba(255, 255, 255, 0);
     &:hover {
-      color: #171C1A;
+      color: #171c1a;
     }
 
-    &:active{
+    &:active {
       box-shadow: 0 0 0 rgb(0, 0, 0, 0);
       top: 3px;
       color: #333;
@@ -44,7 +44,7 @@
     border-width: 0 6px 12px;
     border-color: #000;
     border-bottom-color: #424546;
-    background: #171C1A;
+    background: #171c1a;
     &:hover {
       color: #faf0e6;
     }
@@ -55,21 +55,22 @@
     }
   }
 
-  li:active, li.active {
+  li:active,
+  li.active {
     // by default all keys are wrong which is shown when clicked
-    background: linear-gradient(to bottom, #B50C0C, #D81313 10%, #D20909);
+    background: linear-gradient(to bottom, #b50c0c, #d81313 10%, #d20909);
     &.black-note {
-      border-color: #790C0C;
-      border-bottom-color: #5A0202;
+      border-color: #790c0c;
+      border-bottom-color: #5a0202;
     }
   }
-  li.green:active, li.green.active {
+  li.green:active,
+  li.green.active {
     color: white;
-    background: linear-gradient(to bottom, #158C0D, #2DAD3D 10%, #09A915);
+    background: linear-gradient(to bottom, #158c0d, #2dad3d 10%, #09a915);
     &.black-note {
-      border-color: #18790C;
-      border-bottom-color: #025A1D;
+      border-color: #18790c;
+      border-bottom-color: #025a1d;
     }
   }
-
 }
diff --git a/app/styles/index.less b/app/styles/index.less
index ea9642e..762a58c 100644
--- a/app/styles/index.less
+++ b/app/styles/index.less
@@ -1,14 +1,13 @@
 // @import "../../node_modules/bootstrap/less/bootstrap.less";
 @import (less) "../../node_modules/chartist/dist/chartist.min.css";
 @import (less) "../../node_modules/flexboxgrid/dist/flexboxgrid.min.css";
-@import (less) "./slider.css";
+@import (less) "./slider.less";
 @import (less) "./checkbox.css";
 @import (less) "./chartist_modifications.less";
 @import (less) "./beat_visualization.less";
 @import (less) "./claviature.less";
 @import (less) "./star_animation.less";
 
-
 @import url(http://fonts.googleapis.com/css?family=Poiret+One);
 @import url(http://fonts.googleapis.com/css?family=Droid+Sans:400);
 
@@ -44,7 +43,7 @@ footer {
     }
   }
   h2 {
-    color: #ECECEC;
+    color: #ececec;
   }
   div.left {
     text-align: left;
@@ -55,19 +54,23 @@ footer {
   }
 
   .form-control:focus {
-    border-color: #E0E0E0;
+    border-color: #e0e0e0;
     outline: 0;
-    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
-    box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(224, 224, 224, 0.6);
+    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
+      0 0 8px rgba(102, 175, 233, 0.6);
+    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
+      0 0 8px rgba(224, 224, 224, 0.6);
   }
 
-  .btn, .btn:focus {
+  .btn,
+  .btn:focus {
     transition: all 0.5s ease;
     background-color: transparent;
     border: 1px solid white;
     color: white;
     outline: none;
-    &:hover, &:active {
+    &:hover,
+    &:active {
       background-color: rgba(255, 255, 255, 0.15);
       border-color: white;
     }
@@ -93,7 +96,6 @@ footer {
   }
 }
 
-
 .jumbotron {
   background-color: rgba(0, 0, 0, 0.7);
   padding-top: 24px;
@@ -105,7 +107,7 @@ footer {
 .jumbotron > h1 {
   /*Kozuka Gothic ...*/
   text-align: center;
-  font-family: 'Poiret One', sans-serif;
+  font-family: "Poiret One", sans-serif;
   font-size: 70pt;
   font-weight: 100;
   color: white;
@@ -116,11 +118,10 @@ footer {
   text-align: center;
   color: white;
   margin-top: 10px;
-  font-family: 'Poiret One', sans-serif;
+  font-family: "Poiret One", sans-serif;
   margin-bottom: 20px;
 }
 
-
 #image-background {
   min-height: 100%;
   min-width: 1600px;
@@ -138,7 +139,6 @@ footer {
   right: 10px;
 }
 
-
 h1 {
   font-size: 50*2px;
 }
@@ -209,7 +209,8 @@ h1 {
   transition: all 0.5s ease;
 }
 
-li.modeNavItem a, li.modeNavItem a:focus {
+li.modeNavItem a,
+li.modeNavItem a:focus {
   background-color: transparent;
   border: 1px solid white;
   color: white;
@@ -218,7 +219,8 @@ li.modeNavItem a, li.modeNavItem a:focus {
   }
 }
 
-li.modeNavItem.active a:focus, li.modeNavItem.active a {
+li.modeNavItem.active a:focus,
+li.modeNavItem.active a {
   background-color: white;
   border: 1px solid white;
   color: black;
@@ -229,10 +231,7 @@ li.modeNavItem.active a:focus, li.modeNavItem.active a {
 }
 
 .transition {
-  transition:
-    max-height 0.4s ease,
-    height 0.4s ease,
-    margin 0.4s ease,
+  transition: max-height 0.4s ease, height 0.4s ease, margin 0.4s ease,
     opacity 0.75s ease;
   opacity: 1;
   overflow: hidden;
@@ -280,7 +279,14 @@ li.modeNavItem.active a:focus, li.modeNavItem.active a {
   margin: 25px 0;
   height: 1px;
   background: black;
-  background: -webkit-gradient(linear, 0 0, 100% 0, from(rgba(255, 255, 255, 0.0)), to(rgba(255, 255, 255, 0.0)), color-stop(50%, white));
+  background: -webkit-gradient(
+    linear,
+    0 0,
+    100% 0,
+    from(rgba(255, 255, 255, 0)),
+    to(rgba(255, 255, 255, 0)),
+    color-stop(50%, white)
+  );
 }
 
 .inlineBlock {
@@ -293,7 +299,6 @@ li.modeNavItem.active a:focus, li.modeNavItem.active a {
   margin-left: 0.5%;
 }
 
-
 .noSelect {
   -webkit-touch-callout: none;
   -webkit-user-select: none;
@@ -311,8 +316,6 @@ li.modeNavItem.active a:focus, li.modeNavItem.active a {
   display: none;
 }
 
-
-
 .gameContainer {
   white-space: nowrap;
   overflow: hidden;
diff --git a/app/styles/slider.css b/app/styles/slider.css
deleted file mode 100644
index 63b89ff..0000000
--- a/app/styles/slider.css
+++ /dev/null
@@ -1,36 +0,0 @@
-.range-slider {
-  -webkit-appearance: none;
-  width: 100%;
-  margin: 5px 0;
-}
-.range-slider:focus {
-  outline: none;
-}
-.range-slider__bars {
-  width: 100%;
-  height: 5px;
-  cursor: pointer;
-  box-shadow: 1px 1px 0.9px rgba(0, 0, 0, 0.76), 0px 0px 1px rgba(13, 13, 13, 0.76);
-  background: rgba(0, 0, 0, 0.68);
-  border-radius: 25px;
-  border: 0px solid #010101;
-}
-.range-slider__cursor {
-  box-shadow: 0px 0px 1px #670000, 0px 0px 0px #810000;
-  border: 0px solid #000000;
-  height: 10px;
-  width: 10px;
-  border-radius: 15px;
-  background: rgba(255, 255, 255, 0.99);
-  cursor: pointer;
-  -webkit-appearance: none;
-  margin-top: -7px;
-
-
-  span {
-    visibility: hidden;
-  }
-}
-.range-slider__bars:focus {
-  background: rgba(0, 0, 0, 0.68);
-}
diff --git a/app/styles/slider.less b/app/styles/slider.less
new file mode 100644
index 0000000..dfd71f9
--- /dev/null
+++ b/app/styles/slider.less
@@ -0,0 +1,30 @@
+@import (less) "../../node_modules/rc-slider/assets/index.css";
+
+.rc-slider:not(.rc-slider-disabled) {
+  .rc-slider-rail {
+    background: rgba(0, 0, 0, 0.68);
+    box-shadow: 1px 1px 0.9px rgba(0, 0, 0, 0.3), 0 0 1px hsla(0, 0%, 5%, 0.3);
+  }
+
+  .rc-slider-handle {
+    box-shadow: 0 0 4px #670000;
+    border: 1px solid black;
+  }
+
+  .rc-slider-handle:hover,
+  .rc-slider-handle:active {
+    border-color: #670000;
+    box-shadow: 0 0 8px #670000;
+  }
+
+  .rc-slider-handle:focus {
+    border-color: #670000;
+    box-shadow: 0 0 1px 4px #fa9494;
+  }
+  .rc-slider-track {
+    background: #000;
+  }
+}
+.rc-slider-disabled {
+  background: none;
+}
diff --git a/app/styles/star_animation.less b/app/styles/star_animation.less
index 998fa49..d15ff90 100644
--- a/app/styles/star_animation.less
+++ b/app/styles/star_animation.less
@@ -17,11 +17,19 @@
 }
 
 @keyframes rotation-1 {
-  from {transform: rotate(0deg); }
-  to {transform: rotate(360deg); }
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
 }
 
 @keyframes rotation-2 {
-  from {transform: rotate(0deg); }
-  to {transform: rotate(360deg); }
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
 }
diff --git a/package.json b/package.json
index 0bc0002..ca68ed1 100644
--- a/package.json
+++ b/package.json
@@ -21,12 +21,12 @@
     "freezer-js": "git+https://github.com/philippotto/freezer.git#native-object-handling-build",
     "html-loader": "^0.4.3",
     "lodash": "^4.5.1",
-    "react": "^0.14.5",
-    "react-addons-pure-render-mixin": "^0.14.8",
-    "react-bootstrap": "^0.28.3",
-    "react-dom": "^0.14.5",
-    "react-motion": "^0.4.2",
-    "react-range-slider-bem": "^0.2.11",
+    "prop-types": "^15.5.10",
+    "rc-slider": "^8.3.1",
+    "react": "^16.0.0",
+    "react-bootstrap": "^0.31.1",
+    "react-dom": "^16.0.0",
+    "react-motion": "^0.5.0",
     "vexflow": "^1.2.41"
   },
   "devDependencies": {
@@ -40,8 +40,8 @@
     "babel-preset-stage-0": "^6.3.13",
     "css-loader": "^0.23.1",
     "eslint": "^3.14.1",
-    "eslint-plugin-prettier": "^2.1.2",
-    "eslint-plugin-react": "^4.1.0",
+    "eslint-plugin-prettier": "^2.3.1",
+    "eslint-plugin-react": "^7.4.0",
     "font-awesome-webpack": "0.0.4",
     "jasmine-core": "^2.4.1",
     "karma": "^0.13.21",
@@ -55,7 +55,7 @@
     "less": "^2.6.0",
     "less-loader": "^2.2.2",
     "phantomjs-prebuilt": "^2.1.6",
-    "prettier": "^1.5.0",
+    "prettier": "^1.7.4",
     "react-transform-hmr": "^1.0.1",
     "style-loader": "^0.13.0",
     "url-loader": "^0.5.7",
diff --git a/webpack.config.js b/webpack.config.js
index 980f345..9c0fe0d 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -76,7 +76,10 @@ module.exports = {
         test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
         loader: "url-loader?limit=10000&minetype=application/font-woff"
       },
-      { test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader" },
+      {
+        test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
+        loader: "file-loader"
+      },
       { test: /\.html/, loader: "file?name=[name].[ext]" }
     ]
   }