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.

Example:

<SliderInput
    legend="Success Probability"
    defaultValue={0.5}
    min={0}
    max={1}
    step={0.01}
/>

Open interactive preview

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 greyed-out. Default: false.
  • inline | boolean: controls whether to place the slider inline with text or outside. Default: false.
  • max | number: The maximum value of the slider. Default: 100.
  • min | number: The minimum value of the slider. Default: 0.
  • 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.
  • style | object: CSS inline styles. Default: {}.

results matching ""

    No results matching ""