Range sliders

Understanding precision

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 is 1.
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 add valuePrepend and/or valueAppend to 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.

Retrieving field values

Two-value input[type=range] elements are not part of the HTML5 specification. Because of this support gap, EuiDualRange does not (by default) expose a native value property for form 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.

Minimum of 5px width per tick allowed

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 hook utility to reduce the tick interval responsively.

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.

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.

Props

EuiRange

Extends InputHTMLAttributes, SelectHTMLAttributes, ButtonHTMLAttributes, TextareaHTMLAttributes


Prop	Description and type	Default value
Prop value#	Description and type Type: `string \| number`	Default value Required
Prop max#	Description and type Type: `number`	Default value Required
Prop min#	Description and type Type: `number`	Default value Required
Prop levels#	Description and type Create colored indicators for certain intervals. An array of #EuiRangeLevel objects Type: `EuiRangeLevel[]`	Default value
Prop append#	Description and type Only impacts the input rendered by the `showInput` prop. `string` \| `ReactElement` or an array of these Type: `PrependAppendType`	Default value
Prop className#	Description and type Type: `string`	Default value
Prop prepend#	Description and type Only impacts the input rendered by the `showInput` prop. `string` \| `ReactElement` or an array of these Type: `PrependAppendType`	Default value
Prop css#	Description and type Type: `Interpolation<Theme>`	Default value
Prop fullWidth#	Description and type Expand to fill 100% of the parent. Defaults to `fullWidth` prop of `<EuiForm>`. Type: `boolean`	Default value `false`
Prop isLoading#	Description and type Only impacts inputs rendered when the `showInput` prop is set to `"inputWithPopover"` Type: `boolean`	Default value
Prop aria-label#	Description and type Type: `string`	Default value
Prop data-test-subj#	Description and type Type: `string`	Default value
Prop onChange#	Description and type Type: `(event: _SingleRangeChangeEvent, isValid: boolean) => void`	Default value
Prop step#	Description and type The number to increment or decrement between each interval Type: `number`	Default value `1`
Prop compressed#	Description and type Only impacts ticks rendered by `showTicks` or inputs rendered by `showInput`. Type: `boolean`	Default value
Prop isInvalid#	Description and type Only impacts inputs rendered by the `showInput` prop Type: `boolean`	Default value
Prop inputPopoverProps#	Description and type Only impacts input popovers rendered when the `showInput` prop is set to `"inputWithPopover"` Allows customizing the underlying EuiInputPopover, except for props controlled by the range component Type: `Omit<EuiInputPopoverProps, "input" \| "fullWidth" \| "isOpen" \| "closePopover" \| "popoverScreenReaderText" \| "disableFocusTrap">`	Default value
Prop ticks#	Description and type Specified ticks at specified values Type: `EuiRangeTick[]`	Default value
Prop tickInterval#	Description and type Modifies the number of tick marks and at what interval Type: `number`	Default value
Prop showInput#	Description and type Pass `true` to displays an extra input control for direct manipulation. Pass `"inputWithPopover"` to only show the input but show the range in a dropdown. Type: `boolean \| "inputWithPopover"`	Default value
Prop showLabels#	Description and type Shows static min/max labels on the sides of the range slider Type: `boolean`	Default value
Prop showRange#	Description and type Shows a thick line from min to value Type: `boolean`	Default value
Prop showTicks#	Description and type Shows clickable tick marks and labels at the given interval (`step`/`tickInterval`) Type: `boolean`	Default value
Prop showValue#	Description and type Shows a tooltip styled value Type: `boolean`	Default value
Prop valueAppend#	Description and type Appends to the tooltip Type: `ReactNode`	Default value
Prop valuePrepend#	Description and type Prepends to the tooltip Type: `ReactNode`	Default value
Prop ref#	Description and type Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs} Type: `LegacyRef<unknown>`	Default value

EuiDualRange