EuiRange and EuiDualRange fixes

CHANGELOG.md

@@ -3,6 +3,10 @@
 - Converted `EuiToggle` to TypeScript ([#1570](https://github.com/elastic/eui/pull/1570))
 - Added type definitions for `EuiButtonGroup`,`EuiButtonToggle`, `EuiFilterButton`, `EuiFilterGroup`, and `EuiFilterSelectItem` ([#1570](https://github.com/elastic/eui/pull/1570))
 
+**Bug fixes**
+
+- Fixed several bugs with `EuiRange` and `EuiDualRange` including sizing of inputs, tick placement, and the handling of invalid values ([#1580](https://github.com/elastic/eui/pull/1580))
+
 ## [`7.2.0`](https://github.com/elastic/eui/tree/v7.2.0)
 
 - Added `text` as a color option for `EuiLink` ([#1571](https://github.com/elastic/eui/pull/1571))

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

@@ -1,12 +1,9 @@
 import React, {
   Component,
-  Fragment,
 } from 'react';
 
 import {
   EuiDualRange,
-  EuiSpacer,
-  EuiFormHelpText,
 } from '../../../../src/components';
 
 import makeId from '../../../../src/components/form/form_row/make_id';
@@ -15,21 +12,8 @@ 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]
+      value: ['', ''],
     };
   }
 
@@ -41,96 +25,15 @@ export default class extends Component {
 
   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>
+      <EuiDualRange
+        id={makeId()}
+        min={-100}
+        max={200}
+        step={10}
+        value={this.state.value}
+        onChange={this.onChange}
+        showLabels
+      />
     );
   }
 }

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

@@ -0,0 +1,57 @@
+import React, {
+  Component,
+  Fragment,
+} from 'react';
+
+import {
+  EuiRange,
+  EuiSpacer,
+  EuiDualRange,
+} from '../../../../src/components';
+
+import makeId from '../../../../src/components/form/form_row/make_id';
+
+export default class extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      value: '20',
+      dualValue: [20, 100],
+    };
+  }
+
+  onChange = e => {
+    this.setState({
+      value: e.target.value,
+    });
+  };
+
+  onDualChange = (value) => {
+    this.setState({
+      dualValue: value
+    });
+  };
+
+  render() {
+    return (
+      <Fragment>
+        <EuiRange
+          id={makeId()}
+          value={this.state.value}
+          onChange={this.onChange}
+          showInput
+        />
+
+        <EuiSpacer size="xl" />
+
+        <EuiDualRange
+          id={makeId()}
+          value={this.state.dualValue}
+          onChange={this.onDualChange}
+          showInput
+        />
+      </Fragment>
+    );
+  }
+}

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

@@ -0,0 +1,80 @@
+import React, {
+  Component,
+  Fragment,
+} from 'react';
+
+import {
+  EuiRange,
+  EuiSpacer,
+  EuiFormHelpText,
+  EuiDualRange,
+} 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: 20,
+        color: 'danger'
+      },
+      {
+        min: 20,
+        max: 100,
+        color: 'success'
+      }
+    ];
+
+    this.state = {
+      value: '20',
+      dualValue: [20, 100],
+    };
+  }
+
+  onChange = e => {
+    this.setState({
+      value: e.target.value,
+    });
+  };
+
+  onDualChange = (value) => {
+    this.setState({
+      dualValue: value
+    });
+  };
+
+  render() {
+    return (
+      <Fragment>
+        <EuiRange
+          id={makeId()}
+          value={this.state.value}
+          onChange={this.onChange}
+          showTicks
+          tickInterval={20}
+          levels={this.levels}
+          aria-describedby="levelsHelp2"
+        />
+        <EuiFormHelpText id="levelsHelp2">Recommended levels are {this.levels[1].min} and above.</EuiFormHelpText>
+
+        <EuiSpacer size="xl" />
+
+        <EuiDualRange
+          id={makeId()}
+          value={this.state.dualValue}
+          onChange={this.onDualChange}
+          showTicks
+          ticks={[{ label: '20kb', value: 20 }, { label: '100kb', value: 100 }]}
+          showInput
+          levels={this.levels}
+          aria-describedby="levelsHelp3"
+        />
+        <EuiFormHelpText id="levelsHelp3">Recommended size is {this.levels[1].min}kb and above.</EuiFormHelpText>
+      </Fragment>
+    );
+  }
+}