Added range slider to <NumberInput />

src/components/inputs/NumberInput.jsx

@@ -68,7 +68,34 @@ class NumberInput extends React.Component {
   }
 
   render() {
-    return <input
+    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}
@@ -76,6 +103,7 @@ class NumberInput extends React.Component {
         onChange={e => this.changeValue(e.target.value)}
         onBlur={this.resetValue}
       />
+    </div>
   }
 }
 

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}

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}