diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9164b6b6cf2..01c46c5e0f3 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,6 @@
## [`master`](https://github.com/elastic/eui/tree/master)
-No public interface changes since `1.0.1`.
+- Added more (mainly style) options to `EuiRange` ([#932](https://github.com/elastic/eui/pull/932))
## [`1.0.1`](https://github.com/elastic/eui/tree/v1.0.1)
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 24cc55803fe..79cc694b7b1 100644
--- a/src-docs/src/views/form_controls/form_controls_example.js
+++ b/src-docs/src/views/form_controls/form_controls_example.js
@@ -69,9 +69,9 @@ import RadioGroup from './radio_group';
const radioGroupSource = require('!!raw-loader!./radio_group');
const radioGroupHtml = renderToHtml(RadioGroup);
-import Range from './range';
+import RangeExample from './range';
const rangeSource = require('!!raw-loader!./range');
-const rangeHtml = renderToHtml(Range);
+const rangeHtml = renderToHtml(RangeExample);
import Switch from './switch';
const switchSource = require('!!raw-loader!./switch');
@@ -238,6 +238,23 @@ export const FormControlsExample = {
demo:
+
+
+ The base slider should only be used
+ when the precise value is not considered important . If
+ the precise value does matter, add the showInput prop or use
+ a EuiFieldNumber instead.
+
+
+
+ While currently considered optional, the showLabels property should
+ be added to explicitly state the range to the user.
+
+
+ ),
source: [{
type: GuideSectionTypes.JS,
code: rangeSource,
@@ -248,7 +265,7 @@ export const FormControlsExample = {
props: {
EuiRange,
},
- demo: Recommended levels are 600 and above.
+
+
+
+ 1
+
+
+
+
+ 100
+
+
+ {this.renderLabel('min')}
+
+
+
+
+ {this.renderLabel('max')}
+ {extraInputNode}
+
+ {this.props[side]}
+
+ );
+
+ }
+
+ renderTicks = (tickObject) => {
+ const {
+ disabled,
+ onChange,
+ showTicks,
+ value
+ } = this.props;
+
+ if (!showTicks) {
+ return;
+ }
+
+ // Align with item labels across the range by adding
+ // left and right negative margins that is half of the tick marks
+ const ticksStyle = { margin: `0 ${tickObject.percentageWidth / -2}%` };
+
+ return (
+
+ {tickObject.sequence.map((tickValue, index) => {
+ const tickClasses = classNames(
+ 'euiRange__tick',
+ { 'euiRange__tick--selected': value === tickValue, }
+ );
+
+ return (
+
+ {tickValue}
+
+ );
+ })}
+
+ );
+ }
+
+ renderRange = () => {
+ const {
+ showRange,
+ value,
+ max,
+ min,
+ } = this.props;
+
+ if (!showRange) {
+ return;
+ }
+
+ // Calculate the width the range based on value
+ const rangeWidth = (value - min) / (max - min);
+ const rangeWidthStyle = { width: `${rangeWidth * 100}%` };
+
+ return (
+
+ );
+ }
+
+ renderValue = () => {
+ const {
+ showValue,
+ value,
+ max,
+ min,
+ name,
+ } = this.props;
+
+ if (!showValue) {
+ return;
+ }
+
+ // Calculate the left position based on value
+ const decimal = (value - min) / (max - min);
+ // Must be between 0-100%
+ let valuePosition = decimal <= 1 ? decimal : 1;
+ valuePosition = valuePosition >= 0 ? valuePosition : 0;
+
+ let valuePositionSide;
+ if (valuePosition > .5) {
+ valuePositionSide = 'left';
+ } else {
+ valuePositionSide = 'right';
+ }
+
+ const valuePositionStyle = { left: `${valuePosition * 100}%` };
+
+ // Change left/right position based on value (half way point)
+ const valueClasses = classNames(
+ 'euiRange__value',
+ `euiRange__value--${valuePositionSide}`,
+ );
+
+ return (
+
+
+ {value}
+
+
+ );
+ }
+
+ renderLevels = () => {
+ const {
+ levels,
+ max,
+ min,
+ } = this.props;
+
+ if (levels.length < 1) {
+ return;
+ }
+
+ return (
+
+ {levels.map((level, index) => {
+ const range = level.max - level.min;
+ const width = (range / (max - min)) * 100;
+
+ return (
+
+ );
+ }
+}
+
+function calculateTicksObject(min, max, interval) {
+ // Calculate the width of each tick mark
+ const tickWidthDecimal = (interval / ((max - min) + interval));
+ const tickWidthPercentage = tickWidthDecimal * 100;
+
+ // Loop from min to max, creating ticks at each interval
+ // (adds a very small number to the max since `range` is not inclusive of the max value)
+ const toBeInclusive = .000000001;
+ const sequence = range(min, max + toBeInclusive, interval);
return (
-
+ );
+
+ expect(component)
+ .toMatchSnapshot();
+ });
+
+ test('range should render', () => {
+ const component = render(
+ {}}
+ showInput
+ {...requiredProps}
+ />
+ );
+
+ expect(component)
+ .toMatchSnapshot();
+ });
+
+ test('levels should render', () => {
+ const component = render(
+