From cdd5d27908ce1556d8868daa89005b527cfffbfa Mon Sep 17 00:00:00 2001
From: orangemug <info@orangemug.co.uk>
Date: Tue, 30 Oct 2018 20:35:22 +0000
Subject: [PATCH] Added range slider to <NumberInput />

---
 src/components/inputs/NumberInput.jsx  | 44 +++++++++++++++++++++-----
 src/components/layers/MaxZoomBlock.jsx |  1 +
 src/components/layers/MinZoomBlock.jsx |  1 +
 3 files changed, 38 insertions(+), 8 deletions(-)

diff --git a/src/components/inputs/NumberInput.jsx b/src/components/inputs/NumberInput.jsx
index 75ed148..e4fb221 100644
--- a/src/components/inputs/NumberInput.jsx
+++ b/src/components/inputs/NumberInput.jsx
@@ -68,14 +68,42 @@ class NumberInput extends React.Component {
   }
 
   render() {
-    return <input
-      spellCheck="false"
-      className="maputnik-number"
-      placeholder={this.props.default}
-      value={this.state.value}
-      onChange={e => this.changeValue(e.target.value)}
-      onBlur={this.resetValue}
-    />
+    let rangeEl;
+
+    if(
+      this.props.hasOwnProperty("min") && this.props.hasOwnProperty("max") &&
+      this.props.min !== undefined && this.props.max !== undefined &&
+      this.props.allowRange
+    ) {
+      rangeEl = (
+        <input
+          style={{width: "calc(100% - 4em)", flexShrink: "0"}}
+          key="range"
+          type="range"
+          step="0.01"
+          max={this.props.max}
+          min={this.props.min}
+          spellCheck="false"
+          className="maputnik-number"
+          value={this.state.value || this.props.default}
+          onChange={e => this.changeValue(e.target.value)}
+          onBlur={this.resetValue}
+        />
+      );
+    }
+
+    return <div style={{display: "flex"}}>
+      {rangeEl}
+      <input
+        key="text"
+        spellCheck="false"
+        className="maputnik-number"
+        placeholder={this.props.default}
+        value={this.state.value}
+        onChange={e => this.changeValue(e.target.value)}
+        onBlur={this.resetValue}
+      />
+    </div>
   }
 }
 
diff --git a/src/components/layers/MaxZoomBlock.jsx b/src/components/layers/MaxZoomBlock.jsx
index b4ab33e..7447593 100644
--- a/src/components/layers/MaxZoomBlock.jsx
+++ b/src/components/layers/MaxZoomBlock.jsx
@@ -16,6 +16,7 @@ class MaxZoomBlock extends React.Component {
       data-wd-key="max-zoom"
     >
       <NumberInput
+        allowRange={true}
         value={this.props.value}
         onChange={this.props.onChange}
         min={latest.layer.maxzoom.minimum}
diff --git a/src/components/layers/MinZoomBlock.jsx b/src/components/layers/MinZoomBlock.jsx
index 06b0d28..72ac16a 100644
--- a/src/components/layers/MinZoomBlock.jsx
+++ b/src/components/layers/MinZoomBlock.jsx
@@ -16,6 +16,7 @@ class MinZoomBlock extends React.Component {
       data-wd-key="min-zoom"
     >
       <NumberInput
+        allowRange={true}
         value={this.props.value}
         onChange={this.props.onChange}
         min={latest.layer.minzoom.minimum}