EuiDualRange component

src-docs/src/routes.js

@@ -201,6 +201,9 @@ import { PortalExample }
 import { ProgressExample }
   from './views/progress/progress_example';
 
+import { RangeControlExample }
+  from './views/range/range_example';
+
 import { ResponsiveExample }
   from './views/responsive/responsive_example';
 
@@ -400,6 +403,7 @@ const navigation = [{
     DatePickerExample,
     ExpressionExample,
     FilterGroupExample,
+    RangeControlExample,
     SearchBarExample,
   ].map(example => createExample(example)),
 },

src-docs/src/views/form_controls/form_controls_example.js

@@ -25,7 +25,6 @@ import {
   EuiLink,
   EuiRadio,
   EuiRadioGroup,
-  EuiRange,
   EuiSelect,
   EuiSwitch,
   EuiTextArea,
@@ -75,10 +74,6 @@ import RadioGroup from './radio_group';
 const radioGroupSource = require('!!raw-loader!./radio_group');
 const radioGroupHtml = renderToHtml(RadioGroup);
 
-import RangeExample from './range';
-const rangeSource = require('!!raw-loader!./range');
-const rangeHtml = renderToHtml(RangeExample);
-
 import Switch from './switch';
 const switchSource = require('!!raw-loader!./switch');
 const switchHtml = renderToHtml(Switch);
@@ -250,36 +245,6 @@ export const FormControlsExample = {
       EuiRadioGroup,
     },
     demo: <RadioGroup />,
-  }, {
-    title: 'Range',
-    text: (
-      <Fragment>
-        <EuiCallOut color="warning" title="Understanding precision">
-          <p>
-            The base slider should only be used
-            when <strong>the precise value is not considered important</strong>. If
-            the precise value does matter, add the <code>showInput</code> prop or use
-            a <code>EuiFieldNumber</code> instead.
-          </p>
-        </EuiCallOut>
-        <br/>
-        <p>
-          While currently considered optional, the <code>showLabels</code> property should
-          be added to explicitly state the range to the user.
-        </p>
-      </Fragment>
-    ),
-    source: [{
-      type: GuideSectionTypes.JS,
-      code: rangeSource,
-    }, {
-      type: GuideSectionTypes.HTML,
-      code: rangeHtml,
-    }],
-    props: {
-      EuiRange,
-    },
-    demo: <RangeExample />,
   }, {
     title: 'Switch',
     source: [{

src-docs/src/views/range/dual_range.js

@@ -0,0 +1,136 @@
+import React, {
+  Component,
+  Fragment,
+} from 'react';
+
+import {
+  EuiDualRange,
+  EuiSpacer,
+  EuiFormHelpText,
+} from '../../../../src/components';
+
+import makeId from '../../../../src/components/form/form_row/make_id';
+
+export default class extends Component {
+  constructor(props) {
+    super(props);
+
+    this.levels = [
+      {
+        min: 0,
+        max: 600,
+        color: 'danger'
+      },
+      {
+        min: 600,
+        max: 2000,
+        color: 'success'
+      }
+    ];
+
+    this.state = {
+      value: [120, 480]
+    };
+  }
+
+  onChange = (value) => {
+    this.setState({
+      value
+    });
+  };
+
+  render() {
+    return (
+      <Fragment>
+
+        <EuiDualRange
+          id={makeId()}
+          min={0}
+          max={2000}
+          value={this.state.value}
+          onChange={this.onChange}
+          aria-label="Use aria labels when no actual label is in use"
+          showLabels
+          name="dualRange"
+        />
+
+        <EuiSpacer size="xl" />
+
+        <EuiDualRange
+          id={makeId()}
+          min={0}
+          max={2000}
+          value={this.state.value}
+          onChange={this.onChange}
+          disabled
+          aria-label="Use aria labels when no actual label is in use"
+          showLabels
+        />
+
+        <EuiSpacer size="xl" />
+
+        <EuiDualRange
+          id={makeId()}
+          min={0}
+          max={2000}
+          value={this.state.value}
+          onChange={this.onChange}
+          aria-label="Use aria labels when no actual label is in use"
+          showLabels
+          showInput
+          showRange
+        />
+
+        <EuiSpacer size="xl" />
+
+        <EuiDualRange
+          id={makeId()}
+          min={0}
+          max={2000}
+          step={50}
+          value={this.state.value}
+          onChange={this.onChange}
+          aria-label="Use aria labels when no actual label is in use"
+          aria-describedby="levelsHelp"
+          showLabels
+          showInput
+          compressed
+          levels={this.levels}
+        />
+        <EuiFormHelpText id="levelsHelp">Recommended levels are 600 and above.</EuiFormHelpText>
+
+        <EuiSpacer size="xl" />
+
+        <EuiDualRange
+          id={makeId()}
+          min={0}
+          max={2000}
+          step={50}
+          value={this.state.value}
+          onChange={this.onChange}
+          aria-label="Use aria labels when no actual label is in use"
+          showTicks
+          showRange
+          tickInterval={300}
+        />
+
+        <EuiSpacer size="xl" />
+
+        <EuiDualRange
+          id={makeId()}
+          min={0}
+          max={2000}
+          step={50}
+          value={this.state.value}
+          onChange={this.onChange}
+          aria-label="Use aria labels when no actual label is in use"
+          aria-describedby="levelsHelp"
+          showTicks
+          showInput
+          tickInterval={500}
+          levels={this.levels}
+        />
+      </Fragment>
+    );
+  }
+}

src-docs/src/views/form_controls/range.js → src-docs/src/views/range/range.js

@@ -29,7 +29,7 @@ export default class extends Component {
     ];
 
     this.state = {
-      value: '120',
+      value: '120'
     };
   }
 

src-docs/src/views/range/range_example.js

@@ -0,0 +1,73 @@
+import React, { Fragment } from 'react';
+
+import { renderToHtml } from '../../services';
+
+import {
+  GuideSectionTypes,
+} from '../../components';
+
+import {
+  EuiCallOut,
+  EuiDualRange,
+  EuiRange,
+  EuiSpacer
+} from '../../../../src/components';
+
+import DualRangeExample from './dual_range';
+const dualRangeSource = require('!!raw-loader!./dual_range');
+const dualRangeHtml = renderToHtml(DualRangeExample);
+
+import RangeExample from './range';
+const rangeSource = require('!!raw-loader!./range');
+const rangeHtml = renderToHtml(RangeExample);
+
+export const RangeControlExample = {
+  title: 'Range',
+  intro: (
+    <Fragment>
+      <EuiCallOut color="warning" title="Understanding precision">
+        <p>
+        Range sliders should only be used
+        when <strong>the precise value is not considered important</strong>. If
+        the precise value does matter, add the <code>showInput</code> prop or use
+        a <code>EuiFieldNumber</code> instead.
+        </p>
+        <p>
+        While currently considered optional, the <code>showLabels</code> property should
+        be added to explicitly state the range to the user.
+        </p>
+      </EuiCallOut>
+      <EuiSpacer size="l" />
+    </Fragment>
+  ),
+  sections: [
+    {
+      title: 'Range',
+      source: [{
+        type: GuideSectionTypes.JS,
+        code: rangeSource,
+      }, {
+        type: GuideSectionTypes.HTML,
+        code: rangeHtml,
+      }],
+      props: {
+        EuiRange,
+      },
+      demo: <RangeExample />,
+    },
+    {
+      title: 'DualRange',
+      source: [{
+        type: GuideSectionTypes.JS,
+        code: dualRangeSource,
+      }, {
+        type: GuideSectionTypes.HTML,
+        code: dualRangeHtml,
+      }],
+      props: {
+        EuiDualRange,
+      },
+      demo: <DualRangeExample />,
+    }
+  ]
+};

src/components/form/index.js

@@ -18,7 +18,7 @@ export {
   EuiRadio,
   EuiRadioGroup,
 } from './radio';
-export { EuiRange } from './range';
+export { EuiDualRange, EuiRange } from './range';
 export { EuiSelect } from './select';
 export {
   EuiSuperSelect,