Range sliders
Range sliders 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.Single range
Required
min, max: Sets the range values.step: Technically not required because the default is1.value, onChange
Optional
showLabels: While currently considered optional, the property should be added to explicitly state the range to the user.showValue: Displays a tooltip style indicator of the selected value. You can addvaluePrependand/orvalueAppendto bookend the value with custom content.showRange: Displays a thickened line from the minimum value to the selected value.
Dual range
The EuiDualRange accepts almost all the same props as the regular EuiRange, with the exception of showRange which is on by default, and showValue since tooltips don't fit properly when there are two.
Two-value input[type=range] elements are not part of the HTML5 specification. Because of this support gap, EuiDualRange cannot expose a native value property for native form to consumption. The React onChange prop is the recommended method for retrieving the upper and lower values.
EuiDualRange does use native inputs to help validate step values and range limits. These may be used as form values when showInput is in use. The alternative is to store values in input[type=hidden].
Inputs
The showInput prop, will append or bookend the range slider with number type inputs. This is important for allowing precise values to be entered by the user.
Passing empty strings as the value to the ranges, will allow the inputs to be blank, though the range handles will show at the min (or max and min) positions.
Tick marks
To show clickable tick marks and labels at a given interval, add the prop showTicks. By default, tick mark interval is bound to the step prop, however, you can set a custom interval without changing the actual steps allowed by passing a number to the tickInterval prop.
To pass completely custom tick marks, you can pass an array of objects that require a value and label. The value must be included in the range of values (min-max), though the label may be anything you choose.
Tick labels can improve the accessibility of your range. If your label is a simple string, it will be read out to screen readers alongside the value. You can also use the accessibleLabel property to provide more explicit screen reader text.
If the width available for each tick displayed is below 5px, the range component will error. Test your usage at multiple screen widths to ensure all ticks are visible on the page at all times, or use EUI's useIsWithinBreakpoints
Levels
To create colored indicators for certain intervals, pass an array of objects that include a min, max and color. Color options are [ "primary", "success", "warning", "danger" ] or a valid CSS color value (e.g. "#ff0000", "red").
Be sure to then add an aria-describedby and match it to the id of a EuiFormHelpText.
Inputs with range in a dropdown
Passing showInput="inputWithPopover" instead of a boolean will only display the inputs until the input is interacted with in which case a dropdown will appear displaying the actual slider.
Kitchen sink
Other alterations you can add to the range are fullWidth, and disabled.