From 0058942a591614765770598ec8bb92b2d60135d7 Mon Sep 17 00:00:00 2001
From: surunzi <surunzi@foxmail.com>
Date: Mon, 2 Oct 2017 10:34:28 +0800
Subject: [PATCH] Dev: Settings range style

---
 src/Settings/Settings.js   | 25 +++++++++++++++++--------
 src/Settings/Settings.scss | 26 ++++++++++++++++++++++++--
 src/Settings/range.hbs     |  5 +++++
 3 files changed, 46 insertions(+), 10 deletions(-)

diff --git a/src/Settings/Settings.js b/src/Settings/Settings.js
index 21ff72b..c9b1da0 100644
--- a/src/Settings/Settings.js
+++ b/src/Settings/Settings.js
@@ -52,12 +52,14 @@ export default class Settings extends Tool
     }
     range(config, key, desc, {min = 0, max = 1, step = 0.1}) 
     {
-        this._settings.push({config, key});
+        this._settings.push({config, key, min, max, step});
+
+        let val = config.get(key);
 
         this._$el.append(this._rangeTpl({
-            desc, min, max, step,
-            idx: this._settings.length - 1,
-            val: config.get(key)
+            desc, min, max, step, val, 
+            progress: progress(val, min, max),
+            idx: this._settings.length - 1
         }));
 
         return this;
@@ -116,9 +118,16 @@ export default class Settings extends Tool
         }).on('input', '.eruda-range input', function () 
         {
             let $this = util.$(this),
-                val = +$this.val();
-            
-            $this.parent().parent().find('.eruda-head span').text(val);
+                $container = $this.parent(),
+                idx = $container.data('idx'),
+                val = +$this.val(),
+                setting = self._settings[idx],
+                {min, max} = setting;
+
+            $container.parent().find('.eruda-head span').text(val);
+            $container.find('.eruda-range-track-progress').css('width', progress(val, min, max) + '%');
         });
     }
-}
\ No newline at end of file
+}
+
+let progress = (val, min, max) => ((val - min) / (max - min) * 100).toFixed(2);
\ No newline at end of file
diff --git a/src/Settings/Settings.scss b/src/Settings/Settings.scss
index 71acc45..3e9048b 100644
--- a/src/Settings/Settings.scss
+++ b/src/Settings/Settings.scss
@@ -50,18 +50,40 @@
             display: none;
             padding: $padding;
             background: $gray-light;
+            position: relative;
             &.open {
                 display: block;
             }
+            .range-track {
+                height: 4px;
+                width: 100%;
+                padding: 0 $padding;
+                position: absolute;
+                left: 0;
+                top: 16px;
+                .range-track-bar {
+                    background: $gray;
+                    border-radius: 2px;
+                    overflow: hidden;
+                    width: 100%;
+                    height: 4px;
+                    .range-track-progress {
+                        height: 100%;
+                        background: $gray-dark;
+                        width: 50%;
+                    }
+                }
+            }
             input {
                 -webkit-appearance: none;
-                background: $gray;
+                background: transparent;
                 height: 4px;
                 width: 100%;
                 position: relative;
                 top: -3px;
                 margin: 0 auto;
                 outline: none;
+                border-radius: 2px;
             }
             input::-webkit-slider-thumb {
                 -webkit-appearance: none;
@@ -72,7 +94,7 @@
                 border: none;
                 height: 16px;
                 border-radius: 10px;
-                background-color: #FFF;
+                background: radial-gradient(circle at center, $gray 0, $gray 20%, #fff 30%, #fff 100%);
                 box-shadow: $box-shadow;
             }
         }
diff --git a/src/Settings/range.hbs b/src/Settings/range.hbs
index d8be69c..5259da7 100644
--- a/src/Settings/range.hbs
+++ b/src/Settings/range.hbs
@@ -4,6 +4,11 @@
         <span class="eruda-val">{{val}}</span>
     </div>
     <div class="eruda-input-container" data-idx="{{idx}}">
+        <div class="eruda-range-track">
+            <div class="eruda-range-track-bar">
+                <div class="eruda-range-track-progress" style="width: {{progress}}%"></div>
+            </div>
+        </div>
         <input type="range" min="{{min}}" max="{{max}}" step="{{step}}" value="{{val}}"/>
     </div>
 </div>
\ No newline at end of file