widgetbook/widgetbookLight logoWidgetbook

Integer Knob

The integer slider knob renders a slider in the Widgetbook UI where you can dynamically enter an integer value for a widget property. This is particularly useful for properties that require an integer input, such as shown in a notification badge.

Varients

The double slider knob has two variants:

  • context.knobs.int.slider(): This variant allows you to enter an integer value via a slider. It does not accept null values.
  • context.knobs.intOrNull.slider(): This variant allows you to enter an integer value via a slider or set the value to null. It is useful when the property can be optional.
Widgetbook also offers support for input-based integer knobs which are documented on the Integer Input Knob page.

Properties

In addition to the knob's base properties, the integer slider knob includes the following properties:

minintoptional

The minimum value the slider can select. This defines the start of the slider's range. Defaults to 0.

maxintoptional

The maximum value the slider can select. This defines the end of the slider's range. Defaults to 20.

divisionsintoptional

Sets how many evenly spaced discrete values are available between min and max. When set, the slider snaps to these fixed intervals. For example, with min: 0, max: 10, and divisions: 5, the selectable values will be: 0, 2, 4, 6, 8, 10. Defaults to null, which allows continuous values.

context.knobs.int.slider()

Example

Usage

To use the integer input knob, call the context.knobs.int.slider() method.

Example: Double Slider Knob
@UseCase(type: MyWidget, name: 'Default')
Widget buildUseCase(BuildContext context) {
  return MyWidget(
    count: context.knobs.int.slider( 
      label: 'count', 
      min: 0, 
      max: 100, 
      divisions: 20, 
      initialValue: 100, 
    ), 
  );
}

context.knobs.intOrNull.slider()

Example

Usage

To use the nullable double input knob, call the context.knobs.doubleOrNull.input() method.

Example: Nullable Double Slider Knob
@UseCase(type: MyWidget, name: 'Default')
Widget buildUseCase(BuildContext context) {
  return MyWidget(
    count: context.knobs.intOrNull.slider( 
      label: 'count', 
      min: 0, 
      max: 100, 
      divisions: 20, 
    ), 
  );
}

Multi-snapshot Support

Multi-snapshot support for Widgetbook Cloud allows you to generate multiple screenshots of a single use case with varying values using KnobsConfigs and AddonsConfigs. Please refer to the Multi-snapshot Support page for more information about IntegerKnobConfig.

Edit this page on GitHub
Input
List