diff --git a/src-docs/src/views/form_controls/form_controls_example.js b/src-docs/src/views/form_controls/form_controls_example.js
index 79cc694b7b11..bcd3a36d8534 100644
--- a/src-docs/src/views/form_controls/form_controls_example.js
+++ b/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: ,
+ }, {
+ title: 'Stepped range',
+ source: [{
+ type: GuideSectionTypes.JS,
+ code: rangeSteppedSource,
+ }, {
+ type: GuideSectionTypes.HTML,
+ code: rangeSteppedHtml,
+ }],
+ props: {
+ EuiRangeStepped,
+ },
+ demo: ,
}, {
title: 'Switch',
source: [{
diff --git a/src-docs/src/views/form_controls/range_stepped.js b/src-docs/src/views/form_controls/range_stepped.js
new file mode 100644
index 000000000000..40ff6ad4898d
--- /dev/null
+++ b/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 (
+
+
+
+ {this.state.value}
+
+ );
+ }
+}
diff --git a/src/components/form/index.js b/src/components/form/index.js
index f04fdc5605b8..2d73edcfa092 100644
--- a/src/components/form/index.js
+++ b/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';
diff --git a/src/components/form/range/__snapshots__/range.test.js.snap b/src/components/form/range/__snapshots__/range.test.js.snap
index 9f7ccfaaaa0e..5d4bb66daa60 100644
--- a/src/components/form/range/__snapshots__/range.test.js.snap
+++ b/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"
/>
`;
@@ -36,19 +36,28 @@ exports[`EuiRange props extra input should render 1`] = `
class="euiRange__wrapper"
>
diff --git a/src/components/form/range/__snapshots__/range_stepped.test.js.snap b/src/components/form/range/__snapshots__/range_stepped.test.js.snap
new file mode 100644
index 000000000000..f7ca2d27558a
--- /dev/null
+++ b/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`] = `
+
+`;
diff --git a/src/components/form/range/_index.scss b/src/components/form/range/_index.scss
index 7ef7e10548ac..709ce0184af2 100644
--- a/src/components/form/range/_index.scss
+++ b/src/components/form/range/_index.scss
@@ -1,3 +1,5 @@
@import 'variables';
@import 'mixins';
+
@import 'range';
+@import 'range_stepped';
diff --git a/src/components/form/range/_range_stepped.scss b/src/components/form/range/_range_stepped.scss
new file mode 100644
index 000000000000..9cc611e1a7ea
--- /dev/null
+++ b/src/components/form/range/_range_stepped.scss
@@ -0,0 +1,3 @@
+.euiRangeStepped {
+
+}
diff --git a/src/components/form/range/index.js b/src/components/form/range/index.js
index 3f3c671156cc..51c95b5b78ad 100644
--- a/src/components/form/range/index.js
+++ b/src/components/form/range/index.js
@@ -1 +1,2 @@
export { EuiRange } from './range';
+export { EuiRangeStepped } from './range_stepped';
diff --git a/src/components/form/range/range.js b/src/components/form/range/range.js
index 85833a44e674..3fbc74703bb1 100644
--- a/src/components/form/range/range.js
+++ b/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}
diff --git a/src/components/form/range/range.test.js b/src/components/form/range/range.test.js
index e97491a0e744..6e2a8fb9a6a8 100644
--- a/src/components/form/range/range.test.js
+++ b/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(
-
+ {}}
+ showInput
+ {...requiredProps}
+ />
);
expect(component)
diff --git a/src/components/form/range/range_stepped.js b/src/components/form/range/range_stepped.js
new file mode 100644
index 000000000000..a58612b31086
--- /dev/null
+++ b/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
+}) => (
+
+ {children}
+
+);
+
+EuiRangeStepped.propTypes = {
+ children: PropTypes.node,
+};
+
+EuiRangeStepped.defaultProps = {
+};
diff --git a/src/components/form/range/range_stepped.test.js b/src/components/form/range/range_stepped.test.js
new file mode 100644
index 000000000000..3e6b93c219ae
--- /dev/null
+++ b/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(
+
+ );
+
+ expect(component)
+ .toMatchSnapshot();
+ });
+});
diff --git a/src/components/index.js b/src/components/index.js
index 2c41840fd582..a97f2728b000 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -128,6 +128,7 @@ export {
EuiRadio,
EuiRadioGroup,
EuiRange,
+ EuiRangeStepped,
EuiSelect,
EuiSwitch,
EuiTextArea,