EuiRange - onValidatedChange props

CHANGELOG.md

@@ -1,5 +1,6 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
+- Added `onValidatedChange` prop to `EuiRange` ([#1461](https://github.com/elastic/eui/pull/1461))
 - Added `inputRef` prop to `EuiFieldNumber` and updated `EuiFieldText`'s to a Ref type ([#1434](https://github.com/elastic/eui/pull/1434))
 - Added `snowflake` icon ([#1445](https://github.com/elastic/eui/pull/1445))
 

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

@@ -7,6 +7,7 @@ import {
   EuiRange,
   EuiSpacer,
   EuiFormHelpText,
+  EuiCode,
 } from '../../../../src/components';
 
 import makeId from '../../../../src/components/form/form_row/make_id';
@@ -30,15 +31,24 @@ export default class extends Component {
 
     this.state = {
       value: '120',
+      validatedValue: '3000',
     };
   }
 
   onChange = e => {
+    // onChange called with Event
     this.setState({
       value: e.target.value,
     });
   };
 
+  onValidatedChange = newValue => {
+    // onValidatedChange called with Number (not Event like onChange)
+    this.setState({
+      validatedValue: newValue
+    });
+  };
+
   render() {
     return (
       <Fragment>
@@ -131,6 +141,35 @@ export default class extends Component {
           tickInterval={500}
           levels={this.levels}
         />
+
+        <EuiSpacer size="xl" />
+
+        <div>
+          <p>
+            <EuiCode>onChange</EuiCode> is called with the DOM Event and requires you to extract the value
+            and validate that the value is a Number within the specified range.
+          </p>
+          <p>
+            Use <EuiCode>onValidatedChange</EuiCode> callback to only receive updates when the value
+            changes to a Number that is within the specified range and leave all that error checking
+            to EuiRange.
+          </p>
+        </div>
+        <EuiSpacer size="s" />
+        <EuiRange
+          id={makeId()}
+          min={2000}
+          max={5000}
+          step={50}
+          value={this.state.validatedValue}
+          onValidatedChange={this.onValidatedChange}
+          showInput
+          showRange
+          showTicks
+          showValue
+          tickInterval={500}
+        />
+
       </Fragment>
     );
   }

src/components/form/range/__snapshots__/range.test.js.snap

@@ -194,13 +194,14 @@ exports[`EuiRange props range should render 1`] = `
       max="100"
       min="1"
       type="range"
+      value="50"
     />
     <div
       class="euiRange__range"
     >
       <div
         class="euiRange__range__progress"
-        style="width:NaN%"
+        style="width:49.494949494949495%"
       />
     </div>
   </div>
@@ -219,6 +220,7 @@ exports[`EuiRange props ticks should render 1`] = `
       max="100"
       min="1"
       type="range"
+      value="50"
     />
     <div
       class="euiRange__ticks"
@@ -286,14 +288,17 @@ exports[`EuiRange props value should render 1`] = `
       max="100"
       min="1"
       type="range"
+      value="50"
     />
     <div
       class="euiRange__valueWrapper"
     >
       <output
-        class="euiRange__value euiRange__value--left"
-        style="left:100%"
-      />
+        class="euiRange__value euiRange__value--right"
+        style="left:49.494949494949495%"
+      >
+        50
+      </output>
     </div>
   </div>
 </div>