From 18f370e12a890f291ac0129d5036c0dcbc121a80 Mon Sep 17 00:00:00 2001
From: Stefan Rimaila <stefan@rimaila.fi>
Date: Fri, 11 Oct 2019 14:13:13 +0300
Subject: [PATCH] feat(components): add Range form component

---
 src/components/form/Range/index.d.ts    | 14 ++++++++++++++
 src/components/form/Range/index.js      | 18 ++++++++++++++++++
 src/components/form/Range/index.test.js |  8 ++++++++
 3 files changed, 40 insertions(+)
 create mode 100644 src/components/form/Range/index.d.ts
 create mode 100644 src/components/form/Range/index.js
 create mode 100644 src/components/form/Range/index.test.js

diff --git a/src/components/form/Range/index.d.ts b/src/components/form/Range/index.d.ts
new file mode 100644
index 0000000..d32016c
--- /dev/null
+++ b/src/components/form/Range/index.d.ts
@@ -0,0 +1,14 @@
+export interface Tick {
+  label: string;
+  value: number;
+}
+
+export interface Props {
+  tickStart: Tick;
+  tickEnd: Tick;
+  value: number;
+  min: number;
+  max: number;
+  step: number;
+  onChange(ev: InputEvent): void;
+}
diff --git a/src/components/form/Range/index.js b/src/components/form/Range/index.js
new file mode 100644
index 0000000..5cbae35
--- /dev/null
+++ b/src/components/form/Range/index.js
@@ -0,0 +1,18 @@
+/* eslint no-unused-vars: [1, {"varsIgnorePattern": "[K|T]"}] */
+import * as React from 'karet';
+import * as U from 'karet.util';
+
+import * as T from './index.d';
+
+/**
+ * @param {T.Props} props
+ */
+function Range({ value, min, max, step, onChange }) {
+  return (
+    <div>
+      <U.Input {...{ type: 'range', value, min, max, step, onChange }} />
+    </div>
+  );
+}
+
+export default Range;
diff --git a/src/components/form/Range/index.test.js b/src/components/form/Range/index.test.js
new file mode 100644
index 0000000..582551e
--- /dev/null
+++ b/src/components/form/Range/index.test.js
@@ -0,0 +1,8 @@
+import * as React from 'karet';
+import { shallow } from 'enzyme';
+
+import Range from './index';
+
+it('renders without crashing', () => {
+  shallow(<Range />);
+});