Double Slider

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 component can be provided with a title, a min/max for the available range (which can, as with all JSX components, be provided programmatically and adjusted whilst the GUI is running)

Properties

• min (number)

The lowest available value for the range. Defaults to 0

• max (number)

The highest available value for the range. Defaults to 100

• steps (number)

The Step of each value available for the range, between the values selectable. Defaults to 1.

• low (number)

The current value of the left slider. By default, this starts at the same value as Min, but can be manually or programmatically set

• high (number)

The current value of the right slider. By default, this starts at the same value as Max, but can be manually or programmatically set

• title (string)

the title to display above the range track

• onChange (event handling function)

The event handler to be called when the values change

• showTooltip (bool)

Set whether to show the tooltip of the current values when hovering over the range

• tooltipPosition (string)

The position of the tooltip, if set to show. options are "top", "bottom", "left" or "right". defaults to "top"

• showTitle (bool)

Set whether to show the title, if one is provided

• disabled (bool)

If set to true, this disables all interaction with the slider

• showMinMaxLabels (bool)

Set whether to see the labels at either end of the range track, which display the min/max values available.

Example