diff --git a/frontend/src/Settings/Quality/Definition/QualityDefinition.css b/frontend/src/Settings/Quality/Definition/QualityDefinition.css
index ef4deb180..8f130ab7f 100644
--- a/frontend/src/Settings/Quality/Definition/QualityDefinition.css
+++ b/frontend/src/Settings/Quality/Definition/QualityDefinition.css
@@ -24,7 +24,7 @@
   height: 20px;
 }
 
-.bar {
+.track {
   top: 9px;
   margin: 0 5px;
   height: 3px;
@@ -36,7 +36,7 @@
   }
 }
 
-.handle {
+.thumb {
   top: 1px;
   z-index: 0 !important;
   width: 18px;
diff --git a/frontend/src/Settings/Quality/Definition/QualityDefinition.js b/frontend/src/Settings/Quality/Definition/QualityDefinition.js
index 8429c2aef..948b68cf5 100644
--- a/frontend/src/Settings/Quality/Definition/QualityDefinition.js
+++ b/frontend/src/Settings/Quality/Definition/QualityDefinition.js
@@ -68,6 +68,27 @@ class QualityDefinition extends Component {
     }
   }
 
+  //
+  // Control
+
+  trackRenderer(props, state) {
+    return (
+      <div
+        {...props}
+        className={styles.track}
+      />
+    );
+  }
+
+  thumbRenderer(props, state) {
+    return (
+      <div
+        {...props}
+        className={styles.thumb}
+      />
+    );
+  }
+
   //
   // Listeners
 
@@ -162,16 +183,16 @@ class QualityDefinition extends Component {
 
         <div className={styles.sizeLimit}>
           <ReactSlider
+            className={styles.slider}
             min={slider.min}
             max={slider.max}
             step={slider.step}
             minDistance={10}
             value={[sliderMinSize, sliderMaxSize]}
-            withBars={true}
+            withTracks={true}
             snapDragDisabled={true}
-            className={styles.slider}
-            barClassName={styles.bar}
-            handleClassName={styles.handle}
+            renderThumb={this.thumbRenderer}
+            renderTrack={this.trackRenderer}
             onChange={this.onSliderChange}
             onAfterChange={this.onAfterSliderChange}
           />