EuiDualRange component

CHANGELOG.md

@@ -1,6 +1,6 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
-No public interface changes since `6.9.0`.
+- Created `EuiDualRange` using components from modularized, refactored `EuiRange`. New util service `isWithinRange` is the first in the number category. ([#1485](https://github.com/elastic/eui/pull/1485))
 
 ## [`6.9.0`](https://github.com/elastic/eui/tree/v6.9.0)
 
@@ -18,13 +18,14 @@ No public interface changes since `6.9.0`.
 ## [`6.8.0`](https://github.com/elastic/eui/tree/v6.8.0)
 
 - Changed `flex-basis` value on `EuiPageBody` for better cross-browser support ([#1497](https://github.com/elastic/eui/pull/1497))
-- Converted a number of components to support text localization ([#1485](https://github.com/elastic/eui/pull/1485))
+- Converted a number of components to support text localization ([#1450](https://github.com/elastic/eui/pull/1450))
 - Added a seconds option to the refresh interval selection in `EuiSuperDatePicker`  ([#1503](https://github.com/elastic/eui/pull/1503))
-- Changed to conditionally render `EuiModalBody` if `EuiConfirmModal` has no `children` ([#1505](https://github.com/elastic/eui/pull/1505))
+- Changed to conditionally render `EuiModalBody` if `EuiConfirmModal` has no `children` ([#1500](https://github.com/elastic/eui/pull/1500))
+
 
 **Bug fixes**
 
-- Remove `font-features` setting on `@euiFont` mixin to prevent breaks in ACE editor ([#1497](https://github.com/elastic/eui/pull/1497))
+- Remove `font-features` setting on `@euiFont` mixin to prevent breaks in ACE editor ([#1505](https://github.com/elastic/eui/pull/1505))
 
 ## [`6.7.4`](https://github.com/elastic/eui/tree/v6.7.4)
 

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,94 @@
+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',
+      text: (
+        <Fragment>
+          <EuiCallOut color="warning" title="Retrieving field values">
+            <p>
+            Two-value <code>input[type=range]</code> elements are not part of the HTML5 specification.
+            Because of this support gap, <code>EuiDualRange</code> cannot expose a native <code>value</code> property
+            for native <code>form</code> to consumption.
+              <strong>
+                The React <code>onChange</code> prop is the recommended method
+                for retrieving the upper and lower values.
+              </strong>
+            </p>
+            <p>
+              <code>EuiDualRange</code> does use native <code>input</code>s to help validate step values
+            and range limits. These may be used as <code>form</code> values when <code>showInput</code> is in use.
+            The alternative is to store values in <code>input[type=hidden]</code>.
+            </p>
+          </EuiCallOut>
+          <EuiSpacer size="l" />
+        </Fragment>
+      ),
+      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,