Dev: Settings range style

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) + '%');
         });
     }
-}
+}
+
+let progress = (val, min, max) => ((val - min) / (max - min) * 100).toFixed(2);

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;
             }
         }

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>