ui.Slider

  • The ui.Slider widget enables users to interactively select a numeric value within a defined range, visually represented by a draggable slider.

  • It offers customization options like minimum/maximum values, step size, initial value, orientation, and an onChange callback to respond to user interactions.

  • Developers can further tailor its appearance using custom CSS styles through the style argument.

A draggable target that ranges linearly between two numeric values. The value of the slider is displayed as a label alongside it.

UsageReturns
ui.Slider(min, max, value, step, onChange, direction, disabled, style)ui.Slider
ArgumentTypeDetails
minNumber, optionalThe minimum value. Defaults to 0.
maxNumber, optionalThe maximum value. Defaults to 1.
valueNumber, optionalThe initial value. Defaults to 0.
stepNumber, optionalThe step size for the slider. Defaults to 0.01.
onChangeFunction, optionalA callback to fire when the slider's state changes. The callback is passed the slider's current value and the slider widget.
directionString, optionalThe direction of the slider. One of 'horizontal' or 'vertical'. Defaults to 'horizontal'.
disabledBoolean, optionalWhether the slider is disabled. Defaults to false.
styleObject, optionalAn object of allowed CSS styles with their values to be set for this widget. See style() documentation.