1 files changed, 69 insertions, 0 deletions

diff --git a/src/components/ui/Slider.tsx b/src/components/ui/Slider.tsx
new file mode 100644
index 000000000..ed9fe9073
--- /dev/null
+++ b/src/components/ui/Slider.tsx
@@ -0,0 +1,69 @@
+import { ChangeEvent, Component, ReactElement } from 'react';
+import { observer } from 'mobx-react';
+import classnames from 'classnames';
+import { noop } from 'lodash';
+
+interface IProps {
+  field: any;
+  className?: string;
+  showLabel?: boolean;
+  disabled?: boolean;
+  type?: 'range' | 'number';
+  onSliderChange?: (e: ChangeEvent) => void;
+}
+
+// TODO - [TS DEBT] Should this file be converted into the coding style similar to './toggle/index.tsx'?
+@observer
+class Slider extends Component<IProps> {
+  onChange(e: ChangeEvent<HTMLInputElement>): void {
+    const { field, onSliderChange = noop } = this.props;
+    field.onChange(e);
+    onSliderChange(e);
+  }
+
+  render(): ReactElement {
+    const {
+      field,
+      className = '',
+      showLabel = true,
+      disabled = false,
+      type = 'range',
+    } = this.props;
+
+    if (field.value === '' && field.default !== '') {
+      field.value = field.default;
+    }
+
+    return (
+      <div
+        className={classnames([
+          'franz-form__field',
+          'franz-form__slider-wrapper',
+          className,
+        ])}
+      >
+        <div className="slider-container">
+          <input
+            className="slider"
+            type={type}
+            id={field.id}
+            name={field.name}
+            value={field.value}
+            min="1"
+            max="100"
+            onChange={e => (!disabled ? this.onChange(e) : null)}
+          />
+        </div>
+
+        {field.error && <div className={field.error}>{field.error}</div>}
+        {field.label && showLabel && (
+          <label className="franz-form__label" htmlFor={field.id}>
+            {field.label}
+          </label>
+        )}
+      </div>
+    );
+  }
+}
+
+export default Slider;