diff --git a/app/scripts/views/pitch_settings_view.js b/app/scripts/views/pitch_settings_view.js
index 1161346..1cb103e 100644
--- a/app/scripts/views/pitch_settings_view.js
+++ b/app/scripts/views/pitch_settings_view.js
@@ -89,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"}
@@ -97,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"}
@@ -110,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}
@@ -118,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}
@@ -126,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/range_setting_component.js b/app/scripts/views/range_setting_component.js
index b4a5fbf..e6c7bf2 100644
--- a/app/scripts/views/range_setting_component.js
+++ b/app/scripts/views/range_setting_component.js
@@ -1,11 +1,9 @@
 import React, { Component } from "react";
 import PropTypes from "prop-types";
-import RangeSlider from "react-range-slider-bem";
+import { Range } from "rc-slider";
 import SettingLine from "./setting_line";
 import _ from "lodash";
 
-const multiplier = 10;
-
 export default class RangeSettingComponent extends Component {
   static defaultProps = {
     valueToString: _.identity,
@@ -15,7 +13,13 @@ export default class RangeSettingComponent extends Component {
   static propTypes = {
     rangeMin: PropTypes.number.isRequired,
     rangeMax: PropTypes.number.isRequired,
-    values: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.number), PropTypes.number]),
+    values: PropTypes.oneOfType([
+      PropTypes.shape({
+        from: PropTypes.number,
+        to: PropTypes.number
+      }),
+      PropTypes.number
+    ]).isRequired,
     onChange: PropTypes.func.isRequired,
     label: PropTypes.string,
     valueToString: PropTypes.func,
@@ -25,63 +29,53 @@ export default class RangeSettingComponent extends Component {
   constructor(props, context) {
     super(props, context);
     this.state = {
-      values: this.valuesFromProps(this.props)
+      values: this.convertValues(this.props.values)
     };
   }
 
-  valuesFromProps(props) {
-    let values = _.isArray(props.values) ? props.values : [props.values];
-    return values.map(el => el * multiplier);
+  /**
+   * 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];
   }
 
   componentWillReceiveProps(newProps) {
-    this.setState = {
-      values: this.valuesFromProps(newProps)
-    };
-  }
-
-  onChange(event, index, values) {
     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/styles/index.less b/app/styles/index.less
index 20725da..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);
 
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/package.json b/package.json
index d26d2d5..8c7a1ef 100644
--- a/package.json
+++ b/package.json
@@ -22,11 +22,11 @@
     "html-loader": "^0.4.3",
     "lodash": "^4.5.1",
     "prop-types": "^15.5.10",
+    "rc-slider": "^8.3.1",
     "react": "^15.6.1",
     "react-bootstrap": "^0.31.1",
     "react-dom": "^15.6.1",
     "react-motion": "^0.5.0",
-    "react-range-slider-bem": "^0.2.11",
     "vexflow": "^1.2.41"
   },
   "devDependencies": {