DoubleSlider

The OdinDoubleSlider component allows the user to access a range value that has a higher and a lower value. This can be used to send a pair of values such as a Min/Max. The Value accessible from it is returned as an array of two objects, so if wrapping it with the WithEndpoint hook, care must be taken to ensure the selected path and endpoint expect an array to be provided.

The Double Slider component has a handful of configurable render options depending on what information is desired. By default, it shows the minimum and maximum value at either end of the sliders, and a tooltip that appears showing the current values when the mouse is hovered over the component.

Note

The slider can accept two event handling functions as Props. These have names that do not quite match their behaviour as might be expected, but have been named this way to allow the DoubleSlider to work seamlessly with the WithEndpoint hook.

Properties

import { OdinDoubleSlider } from 'odin-react';

Name	Type	Default	Description
title	string		If set, will display a title centred above the double slider
min	number	0	The lowest value possible on the sliders
max	number	100	The maximum value on the sliders
step	number	1	The smallest step a slider can move
value	number[]	[min, max]	The combined value of the two sliders into an array.
showTooltip	'boolean'	true	Control whether the tooltip that shows the current slider values appears on hover or not
showMinMaxValues	'boolean'	true	Control whether the Minimum and Maximum values are displayed at either end of the sliders
tooltipPosition	Bootstrap.OverlayTriggerProps.Placement	"auto"	Control the position of the tooltip. see The Bootstrap Overlay page for examples on what positions are available.
disabled	boolean		Control if the component can be interacted with.
onChange	React.ChangeEventHandler		A method that gets called when the slider values change. Will be called every time the slider value changes, before the mouse is released. Allows the component to be wrapped by the WithEndpoint hook.
onKeyPress	React.KeyboardEventHandler		A method that gets called when the mouse is released after dragging. Named oddly to allow the component to be wrapped by the WithEndpoint hook and utilise the same event handling that controls text boxes.

Example

<OdinDoubleSlider title="Example" />
<OdinDoubleSlider min={-20} max={20} step={0.5} showTooltip={false} showMinMaxValues={false}/>