From 8b9dc5372c64b392f12a1f3f5942ae59696a6e88 Mon Sep 17 00:00:00 2001
From: nukeop <alsw@protonmail.com>
Date: Tue, 16 Apr 2019 22:55:53 +0200
Subject: [PATCH] Improve slider display in settings

---
 app/components/Settings/index.js    | 34 +++++++++++++++++------------
 app/components/Settings/styles.scss | 16 +++++++++-----
 2 files changed, 31 insertions(+), 19 deletions(-)

diff --git a/app/components/Settings/index.js b/app/components/Settings/index.js
index b3dffcd210..2f30eb46e1 100644
--- a/app/components/Settings/index.js
+++ b/app/components/Settings/index.js
@@ -155,21 +155,27 @@ class Settings extends React.Component {
   }
 
   renderSliderOption (option) {
-    return (<div className={styles.slider_container}>
-      Value : {this.getOptionValue(option) || option.default} {option.unit}
-      <Range
-        value={this.getOptionValue(option) || option.default}
-        min={option.min}
-        max={option.max}
-        fillColor={volumeSliderColors.fillColor}
-        trackColor={volumeSliderColors.trackColor}
-        thumbColor={volumeSliderColors.thumbColor}
-        height={4}
-        width='100%'
-        onChange={(e) => this.handleSliderChange(e, option)}
-      />
-    </div>);
+    // Value : {this.getOptionValue(option) || option.default} {option.unit}
+    return (
+      <div className={styles.slider_container}>
+        <label>Less</label>  
+        <Range
+          value={this.getOptionValue(option) || option.default}
+          min={option.min}
+          max={option.max}
+          fillColor={volumeSliderColors.fillColor}
+          trackColor={volumeSliderColors.trackColor}
+          thumbColor={volumeSliderColors.thumbColor}
+          height={4}
+          width='auto'
+          onChange={(e) => this.handleSliderChange(e, option)}
+          thumbSize={21}
+        />
+        <label>More</label>
+      </div>
+    );
   }
+  
   renderNumberOption (option) {
     if (typeof option.unit === 'string') {
       return this.renderSliderOption(option);
diff --git a/app/components/Settings/styles.scss b/app/components/Settings/styles.scss
index ba9271368e..0fffb91f5b 100644
--- a/app/components/Settings/styles.scss
+++ b/app/components/Settings/styles.scss
@@ -50,10 +50,6 @@
       font-weight: lighter;
     }
 
-    label {
-      flex: 1 1 auto;
-    }
-
     .checkbox {
       align-self: flex-end;
       flex: 0 0 auto;
@@ -85,6 +81,16 @@
   }
 
   .slider_container{
-    width:100%;
+    display: flex;
+    flex-flow: row;
+    width: 100%;
+
+    div {
+      flex: 1 1 auto;
+    }
+
+    #rrp-baseDiv {
+      margin: 0 2rem;
+    }
   }
 }