More sliders

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)
 

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: <RadioGroup />,
   }, {
     title: 'Range',
+    text: (
+      <Fragment>
+        <EuiCallOut color="warning" title="Understanding precision">
+          <p>
+            The base slider should only be used
+            when <strong>the precise value is not considered important</strong>. If
+            the precise value does matter, add the <code>showInput</code> prop or use
+            a <code>EuiFieldNumber</code> instead.
+          </p>
+        </EuiCallOut>
+        <br/>
+        <p>
+          While currently considered optional, the <code>showLabels</code> property should
+          be added to explicitly state the range to the user.
+        </p>
+      </Fragment>
+    ),
     source: [{
       type: GuideSectionTypes.JS,
       code: rangeSource,
@@ -248,7 +265,7 @@ export const FormControlsExample = {
     props: {
       EuiRange,
     },
-    demo: <Range />,
+    demo: <RangeExample />,
   }, {
     title: 'Switch',
     source: [{

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

@@ -6,6 +6,7 @@ import React, {
 import {
   EuiRange,
   EuiSpacer,
+  EuiFormHelpText,
 } from '../../../../src/components';
 
 import makeId from '../../../../src/components/form/form_row/make_id';
@@ -14,6 +15,19 @@ 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',
     };
@@ -35,9 +49,12 @@ export default class extends Component {
           value={this.state.value}
           onChange={this.onChange}
           aria-label="Use aria labels when no actual label is in use"
+          showLabels
+          showValue
+          name="firstRange"
         />
 
-        <EuiSpacer size="m" />
+        <EuiSpacer size="xl" />
 
         <EuiRange
           id={makeId()}
@@ -47,6 +64,72 @@ export default class extends Component {
           onChange={this.onChange}
           disabled
           aria-label="Use aria labels when no actual label is in use"
+          showLabels
+        />
+
+        <EuiSpacer size="xl" />
+
+        <EuiRange
+          id={makeId()}
+          min={100}
+          max={200}
+          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" />
+
+        <EuiRange
+          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" />
+
+        <EuiRange
+          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
+          showValue
+          tickInterval={300}
+        />
+
+        <EuiSpacer size="xl" />
+
+        <EuiRange
+          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>
     );

src/components/button/_button.scss

@@ -77,7 +77,7 @@ $buttonTypes: (
   text: $euiColorDarkShade, // Reserved for special use cases
 );
 
-// Create button modifiders based upon the map.
+// Create button modifiers based upon the map.
 @each $name, $color in $buttonTypes {
   .euiButton--#{$name} {