Rift.IO OSM R1 Initial Submission

[osm/UI.git] / skyquake / tests / stories / sq-input-slider.js

diff --git a/skyquake/tests/stories/sq-input-slider.js b/skyquake/tests/stories/sq-input-slider.js
new file mode 100644 (file)
index 0000000..e4ebd31
--- /dev/null
+++ b/skyquake/tests/stories/sq-input-slider.js
@@ -0,0 +1,40 @@
+import React from 'react';
+import { storiesOf, action } from '@kadira/storybook';
+import SqInputRangeSlider from '../../framework/widgets/sq-input-range-slider/sq-input-range-slider'
+import StyleGuideItem from 'react-style-guide';
+import '../../node_modules/react-style-guide/node_modules/highlight.js/styles/github.css';
+
+let containerStyle = {
+  display: 'flex'
+};
+
+storiesOf('SqInputRangeSlider', module)
+  .add('Horizontal Slider', () => (
+  <div>
+    <div className="inputcontainer" style={containerStyle}>
+      <SqInputRangeSlider className="one two three" max={150} step={10} width={300} onChange={action('valueChanged')} />
+    </div>
+    <div className="inputcontainer" style={containerStyle}>
+      <SqInputRangeSlider className="one two three" max={150} step={10} width={800} onChange={action('valueChanged')} />
+    </div>
+    <div className="inputcontainer" style={containerStyle}>
+      <SqInputRangeSlider className="one two three" max={150} step={10} width={200} disabled onChange={action('valueChanged')} />
+    </div>
+  </div>
+  ))
+  .add('Vertical Slider', () => (
+                                 <StyleGuideItem>
+<div style={{display:'flex'}}>
+  <div style={containerStyle}>
+    <SqInputRangeSlider vertical={true} width={300}  onChange={action('valueChanged')} />
+  </div>
+  <div style={containerStyle}>
+    <SqInputRangeSlider vertical={true} width={600}  onChange={action('valueChanged')} />
+  </div>
+  <div style={containerStyle}>
+    <SqInputRangeSlider vertical={true} width={300}  onChange={action('valueChanged')} disabled={true} />
+    <SqInputRangeSlider vertical={true} width={300}  onChange={action('valueChanged')} disabled={true} />
+  </div>
+</div>
+</StyleGuideItem>
+  ));