feat(components): add Range form component

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;
+}

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;

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 />);
+});