Adds the content of the advanced tab - w/o chart or dynamic content - to gas customize modal.

1 files changed, 48 insertions, 0 deletions

diff --git a/ui/app/components/gas-customization/gas-slider/gas-slider.component.js b/ui/app/components/gas-customization/gas-slider/gas-slider.component.js
new file mode 100644
index 000000000..5836e7dfc
--- /dev/null
+++ b/ui/app/components/gas-customization/gas-slider/gas-slider.component.js
@@ -0,0 +1,48 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+
+export default class AdvancedTabContent extends Component {
+  static propTypes = {
+    onChange: PropTypes.func,
+    lowLabel: PropTypes.string,
+    highLabel: PropTypes.string,
+    value: PropTypes.number,
+    step: PropTypes.number,
+    max: PropTypes.number,
+    min: PropTypes.number,
+  }
+
+  render () {
+    const {
+      onChange,
+      lowLabel,
+      highLabel,
+      value,
+      step,
+      max,
+      min,
+    } = this.props
+
+    return (
+      <div className="gas-slider">
+        <input
+          className="gas-slider__input"
+          type="range"
+          step={step}
+          max={max}
+          min={min}
+          value={value}
+          id="gasSlider"
+          onChange={event => onChange(event.target.value)}
+        />
+        <div className="gas-slider__bar">
+          <div className="gas-slider__colored"/>
+        </div>
+        <div className="gas-slider__labels">
+          <span>{lowLabel}</span>
+          <span>{highLabel}</span>
+        </div>
+      </div>
+    )
+  }
+}