Skip to main content

Slider Input

A slider input component. Can be used as part of an ISLE dashboard or standalone. In the latter case, you want to handle changes via the onChange attribute or bind the value to a global variable via the bind attribute.

Options​

  • defaultValue | number: The starting value of the slider. Default: 10.
  • disabled | boolean: controls whether the slider input is active or not. If set to true, the slider will be present on the screen, albeit grayed-out. Default: false.
  • inline | boolean: controls whether to place the slider inline with text or outside. Default: false.
  • legend | (string|node): caption of the input. Default: none.
  • max | number: The maximum value of the slider. Default: 100.
  • maxLabel | string: label to be displayed to the right of slider instead of maximum value. Default: none.
  • min | number: The minimum value of the slider. Default: 0.
  • minLabel | string: label to be displayed to the left of slider instead of minimum value. Default: none.
  • onChange | function: callback invoked with the new value when the slider value changes. Default: onChange() {}.
  • precision | number: rounding of the input. The value will be rounded to have no more significant digits than the precision. For example, if one wishes to only use integers, a precision of 10 would be used, while if one wishes to round to the hundreds place, one would use a precision of 0.001. Default: 10.
  • step | (number|string): step size of the slider. Default: 1.
  • hideTooltip | boolean: controls whether to hide tooltip. Default: false.
  • style | object: CSS inline styles. Default: {}.
  • numberInputStyle | object: CSS inline styles for number input component. Default: {}.
  • rangeInputStyle | object: CSS inline style for range input component. Default: {}.

Examples​

Live Editor
Result
ReferenceError: Provider is not defined