Blank stepped range

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

@@ -20,6 +20,7 @@ import {
   EuiLink,
   EuiRadio,
   EuiRange,
+  EuiRangeStepped,
   EuiSelect,
   EuiSwitch,
   EuiTextArea,
@@ -73,6 +74,10 @@ import RangeExample from './range';
 const rangeSource = require('!!raw-loader!./range');
 const rangeHtml = renderToHtml(RangeExample);
 
+import RangeStepped from './range_stepped';
+const rangeSteppedSource = require('!!raw-loader!./range_stepped');
+const rangeSteppedHtml = renderToHtml(RangeStepped);
+
 import Switch from './switch';
 const switchSource = require('!!raw-loader!./switch');
 const switchHtml = renderToHtml(Switch);
@@ -266,6 +271,19 @@ export const FormControlsExample = {
       EuiRange,
     },
     demo: <RangeExample />,
+  }, {
+    title: 'Stepped range',
+    source: [{
+      type: GuideSectionTypes.JS,
+      code: rangeSteppedSource,
+    }, {
+      type: GuideSectionTypes.HTML,
+      code: rangeSteppedHtml,
+    }],
+    props: {
+      EuiRangeStepped,
+    },
+    demo: <RangeStepped />,
   }, {
     title: 'Switch',
     source: [{

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

@@ -0,0 +1,54 @@
+import React, { Component, Fragment } from 'react';
+
+import {
+  EuiRangeStepped,
+} from '../../../../src/components';
+
+import makeId from '../../../../src/components/form/form_row/make_id';
+
+
+export default class extends Component {
+  constructor(props) {
+    super(props);
+
+    const idPrefix = makeId();
+
+    this.options = [{
+      id: `${idPrefix}0`,
+      value: 0,
+      label: 'Option one',
+    }, {
+      id: `${idPrefix}1`,
+      value: 1,
+      label: 'Option two is checked by default',
+    }, {
+      id: `${idPrefix}2`,
+      value: 2,
+      label: 'Option three',
+    }];
+
+    this.state = {
+      value: this.options[1].value,
+    };
+  }
+
+  onChange = e => {
+    this.setState({
+      value: e.currentTarget.value,
+    });
+  };
+
+  render() {
+    return (
+      <Fragment>
+        <EuiRangeStepped
+          options={this.options}
+          onChange={this.onChange}
+          value={this.state.value}
+        />
+
+        {this.state.value}
+      </Fragment>
+    );
+  }
+}

src/components/form/index.js

@@ -18,7 +18,10 @@ export {
   EuiRadio,
   EuiRadioGroup,
 } from './radio';
-export { EuiRange } from './range';
+export {
+  EuiRange,
+  EuiRangeStepped,
+} from './range';
 export { EuiSelect } from './select';
 export { EuiSwitch } from './switch';
 export { EuiTextArea } from './text_area';

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

@@ -13,7 +13,7 @@ exports[`EuiRange is rendered 1`] = `
     min="1"
     name="name"
     type="range"
-    value="value"
+    value="8"
   />
 </div>
 `;
@@ -36,19 +36,28 @@ exports[`EuiRange props extra input should render 1`] = `
   class="euiRange__wrapper"
 >
   <input
-    class="euiRange"
-    max="100"
+    aria-label="aria-label"
+    class="euiRange testClass1 testClass2"
+    data-test-subj="test subject string"
+    id="id"
+    max="10"
     min="1"
+    name="name"
     type="range"
+    value="8"
   />
   <div
     class="euiFormControlLayout"
   >
     <input
+      aria-label="aria-label"
       class="euiFieldNumber euiRange__extraInput"
-      max="100"
+      data-test-subj="test subject string"
+      max="10"
       min="1"
+      name="name"
       type="number"
+      value="8"
     />
   </div>
 </div>

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

@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`EuiRangeStepped is rendered 1`] = `
+<div
+  aria-label="aria-label"
+  class="testClass1 testClass2"
+  data-test-subj="test subject string"
+/>
+`;

src/components/form/range/_index.scss

@@ -1,3 +1,5 @@
 @import 'variables';
 @import 'mixins';
+
 @import 'range';
+@import 'range_stepped';

src/components/form/range/_range_stepped.scss

@@ -0,0 +1,3 @@
+.euiRangeStepped {
+
+}

src/components/form/range/index.js

@@ -1 +1,2 @@
 export { EuiRange } from './range';
+export { EuiRangeStepped } from './range_stepped';

src/components/form/range/range.js

@@ -60,7 +60,7 @@ export const EuiRange = ({
         className="euiRange__extraInput"
         min={min}
         max={max}
-        value={value}
+        value={Number(value)}
         disabled={disabled}
         compressed={compressed}
         {...rest}

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

@@ -12,7 +12,7 @@ describe('EuiRange', () => {
         id="id"
         min={1}
         max={10}
-        value="value"
+        value="8"
         onChange={() => {}}
         {...requiredProps}
       />
@@ -52,7 +52,16 @@ describe('EuiRange', () => {
 
     test('extra input should render', () => {
       const component = render(
-        <EuiRange showInput/>
+        <EuiRange
+          name="name"
+          id="id"
+          min={1}
+          max={10}
+          value="8"
+          onChange={() => {}}
+          showInput
+          {...requiredProps}
+        />
       );
 
       expect(component)

src/components/form/range/range_stepped.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export const EuiRangeStepped = ({
+  className,
+  children,
+  ...rest
+}) => (
+  <div className={className} {...rest}>
+    {children}
+  </div>
+);
+
+EuiRangeStepped.propTypes = {
+  children: PropTypes.node,
+};
+
+EuiRangeStepped.defaultProps = {
+};

src/components/form/range/range_stepped.test.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { render } from 'enzyme';
+import { requiredProps } from '../../../test';
+
+import { EuiRangeStepped } from './range_stepped';
+
+describe('EuiRangeStepped', () => {
+  test('is rendered', () => {
+    const component = render(
+      <EuiRangeStepped {...requiredProps} />
+    );
+
+    expect(component)
+      .toMatchSnapshot();
+  });
+});

src/components/index.js

@@ -128,6 +128,7 @@ export {
   EuiRadio,
   EuiRadioGroup,
   EuiRange,
+  EuiRangeStepped,
   EuiSelect,
   EuiSwitch,
   EuiTextArea,