Slider

A Slider component for displaying current value and intervals in range.

When to use

Used to input a value within a specified range.

Examples

Basic

Basic slider. When range is true, display as dual thumb mode. When disable is true, the slider will not be interactable.

Slider with icon

You can add an icon beside the slider to make it meaningful.

Event

The onChange callback function will fire when the user changes the slider's value. The onChangeComplete callback function will fire when mouseup or keyup fired.

Vertical

The vertical Slider.

Reverse

Using reverse to render slider reversely.

Multiple handles

Multiple handles combination.

Disabled per handle

Set disabled to an array to individually disable specific handles in range mode. Disabled handles act as movement boundaries that other handles cannot cross.

Slider with InputNumber

Synchronize with InputNumber component.

Customize tooltip

Use tooltip.formatter to format content of Tooltip. If tooltip.formatter is null, hide it.

Graduated slider

Using marks property to mark a graduated slider, use value or defaultValue to specify the position of thumb. When included is false, means that different thumbs are coordinative. when step is null, valid points will only be marks, min and max.

Control visibility of Tooltip

When tooltip.open is true, ToolTip will always show, if set to false the ToolTip will not show, even if dragging or hovering.

Draggable track

Make range track draggable by setting range.draggableTrack.

Dynamic edit nodes

Click to add a node, drag out or press the key to delete the node.

Custom semantic dom styling

You can customize the semantic dom style of Sliders by passing objects/functions through classNames and styles.

API

Slider are exported from @ceebee/ui/client.

Slider

Property	Description	Type	Default	Version
`classNames`	Customize class for each semantic structure inside the component. Supports object or function.	`Record<SemanticDOM, string> \| (info: { props })=> Record<SemanticDOM, string>`	`-`	—
`defaultValue`	The default value of the slider. When range is false, use number, otherwise, use \[number, number]	`number \| \[number, number]`	`0 \| \[0, 0]`	—
`disabled`	If true, the slider will not be interactive. This prop can also be an array to disable specific handles in range mode, e.g. [true, false, true] disables first and third handles. When any rendered handle is disabled, editable mode will be disabled	`boolean \| boolean[]`	`false`	—
`keyboard`	Support using keyboard to move handlers	`boolean`	`true`	5.2.0+
`dots`	Whether the thumb can only be dragged to tick marks	`boolean`	`false`	—
`included`	Takes effect when marks is not null. True means containment and false means coordinative	`boolean`	`true`	—
`marks`	Tick marks of Slider. The type of key must be number, and must be in closed interval \[min, max]. Each mark can declare its own style	`object`	`{ number: ReactNode } \| { number: { style: CSSProperties, label: ReactNode } }`	—
`max`	The maximum value the slider can slide to	`number`	`100`	—
`min`	The minimum value the slider can slide to	`number`	`0`	—
`orientation`	Orientation	`horizontal \| vertical`	`horizontal`	—
`range`	Enable dual thumb mode for range selection	`boolean`	`false`	—
`reverse`	Reverse the component	`boolean`	`false`	—
`step`	The granularity the slider can step through values. Must be greater than 0, and be divisible by (max - min). When step is null and marks exist, valid points will only be marks, min and max	`number \| null`	`1`	—
`styles`	Customize inline style for each semantic structure inside the component. Supports object or function.	`Record<SemanticDOM, CSSProperties> \| (info: { props })=> Record<SemanticDOM, CSSProperties>`	`-`	—
`tooltip`	The tooltip related props	`tooltip`	`-`	4.23.0
`value`	The value of slider. When range is false, use number, otherwise, use \[number, number]	`number \| \[number, number]`	`-`	—
`vertical`	If true, the slider will be vertical. Simultaneously existing with orientation, orientation takes priority	`boolean`	`false`	—
`onChangeComplete`	Fire when mouseup or keyup is fired	`(value) => void`	`-`	—
`onChange`	Callback function that is fired when the user changes the slider's value	`(value) => void`	`-`	—
`handleStyle`	Style of the slider handle, please use styles.handle instead	`CSSProperties`	`-`	-
`onAfterChange`	Callback fired when mouseup or keyup is fired, please use onChangeComplete instead	`(value) => void`	`-`	-
`railStyle`	Style of the slider rail, please use styles.rail instead	`CSSProperties`	`-`	-
`trackStyle`	Style of the slider track, please use styles.track instead	`CSSProperties`	`-`	-

range

Property	Description	Type	Default	Version
`draggableTrack`	Whether range track can be dragged	`boolean`	`false`	-
`editable`	Dynamic edit nodes. Cannot be used with draggableTrack	`boolean`	`false`	5.20.0
`minCount`	The minimum count of nodes	`number`	`0`	5.20.0
`maxCount`	The maximum count of nodes	`number`	`-`	5.20.0

tooltip

Property	Description	Type	Default	Version
`autoAdjustOverflow`	Whether to automatically adjust the popup position	`boolean`	`true`	5.8.0
`open`	If true, Tooltip will always be visible; if false, it will never be visible, even when dragging or hovering	`boolean`	`-`	4.23.0
`placement`	Set Tooltip display position. Ref Tooltip	`string`	`-`	4.23.0
`getPopupContainer`	The DOM container of the Tooltip. The default behavior is to create a div element in the body	`(triggerNode) => HTMLElement`	`() => document.body`	4.23.0
`formatter`	Slider will pass its value to formatter, display its value in Tooltip, and hide the Tooltip when the returned value is null	`value => ReactNode \| null`	`IDENTITY`	4.23.0
`blur()`	Remove focus	`—`	`—`	—
`focus()`	Get focus	`—`	`—`	—