Improve slider display in settings

SharlSherif · Apr 16, 2019 · 8b9dc53 · 8b9dc53
1 parent c63ce78
commit 8b9dc53
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 19 deletions.
diff --git 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
@@ -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;
+    }
   }
 }