Add: Settings range

src/Settings/Settings.js

@@ -12,6 +12,7 @@ export default class Settings extends Tool
         this.name = 'settings';
         this._switchTpl = require('./switch.hbs');
         this._selectTpl = require('./select.hbs');
+        this._rangeTpl = require('./range.hbs');
         this._settings = [];
     }
     init($el)
@@ -42,7 +43,19 @@ export default class Settings extends Tool
         this._settings.push({config, key});
 
         this._$el.append(this._selectTpl({
-            desc, key, selections,
+            desc, selections,
+            idx: this._settings.length - 1,
+            val: config.get(key)
+        }));
+
+        return this;
+    }
+    range(config, key, desc, {min = 0, max = 1, step = 0.1}) 
+    {
+        this._settings.push({config, key});
+
+        this._$el.append(this._rangeTpl({
+            desc, min, max, step,
             idx: this._settings.length - 1,
             val: config.get(key)
         }));
@@ -88,6 +101,24 @@ export default class Settings extends Tool
             $ul.parent().find('.eruda-head span').text(val);
 
             setting.config.set(setting.key, val);
+        }).on('click', '.eruda-range .eruda-head', function () 
+        {
+            util.$(this).parent().find('.eruda-input-container').toggleClass('eruda-open');
+        }).on('change', '.eruda-range input', function () 
+        {
+            let $this = util.$(this),
+                $container = $this.parent(),
+                idx = $container.data('idx'),
+                val = $this.val(),
+                setting = self._settings[idx];
+
+            setting.config.set(setting.key, val);
+        }).on('input', '.eruda-range input', function () 
+        {
+            let $this = util.$(this),
+                val = $this.val();
+            
+            $this.parent().parent().find('.eruda-head span').text(val);
         });
     }
 }

src/Settings/Settings.scss

@@ -12,16 +12,16 @@
             color: $gray-dark;
             font-size: 12px;
         }
-        .select {
+        .select, .range {
             cursor: pointer;
         }
-        .select .head, .switch {
+        .select .head, .switch, .range .head {
             padding: $padding;
             background: #fff;
             font-size: $font-size;
             border-bottom: 1px solid $gray-light;
         }
-        .select .head {
+        .select .head, .range .head {
             transition: background $anim-duration, color $anim-duration;
             span {
                 float: right;
@@ -46,6 +46,34 @@
                 }
             }
         }
+        .range .input-container {
+            display: none;
+            padding: $padding;
+            background: $gray-light;
+            &.open {
+                display: block;
+            }
+            input {
+                -webkit-appearance: none;
+                background: $gray;
+                height: 4px;
+                width: 100%;
+                position: relative;
+                top: -3px;
+                margin: 0 auto;
+            }
+            input::-webkit-slider-thumb {
+                -webkit-appearance: none;
+                position: relative;
+                top: 0px;
+                z-index: 1;
+                width: 15px;
+                height: 15px;
+                border-radius: 10px;
+                background-color: #FFF;
+                box-shadow: $box-shadow;
+            }
+        }
         .switch {
             .checkbox {
                 float: right;

src/Settings/range.hbs

@@ -0,0 +1,9 @@
+<div class="eruda-range">
+    <div class="eruda-head">
+        {{desc}}
+        <span class="eruda-val">{{val}}</span>
+    </div>
+    <div class="eruda-input-container" data-idx="{{idx}}">
+        <input type="range" min="{{min}}" max="{{max}}" step="{{step}}" value="{{val}}"/>
+    </div>
+</div>