Double Knob
The double slider knob renders a slider in the Widgetbook UI where you can dynamically enter a double value for a widget property. This is particularly useful for properties that require a double input, such as a percentage or currency.
Variants
The double slider knob has two variants:
context.knobs.double.slider(): This variant allows you to enter a double value via a slider. It does not acceptnullvalues.context.knobs.doubleOrNull.slider(): This variant allows you to enter a double value via a slider or set the value tonull. It is useful when the property can be optional.
Properties
In addition to the knob's base properties, the double slider knob includes the following properties:
minintoptionalThe minimum value the slider can select. This defines the start of the slider's range.
Defaults to 0.
maxintoptionalThe maximum value the slider can select. This defines the end of the slider's range.
Defaults to 20.
divisionsintoptionalSets 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.
Usage
To use the double input knob, call the context.knobs.double.slider() method.
@UseCase(type: MyWidget, name: 'Default')
Widget buildUseCase(BuildContext context) {
return MyWidget(
value: context.knobs.double.slider(
label: 'value',
min: 0,
max: 1,
divisions: 10,
initialValue: 0.2,
),
);
}
Usage
To use the nullable double input knob, call the context.knobs.doubleOrNull.input() method.
@UseCase(type: MyWidget, name: 'Default')
Widget buildUseCase(BuildContext context) {
return MyWidget(
value: context.knobs.doubleOrNull.slider(
label: 'value',
min: 0,
max: 1,
divisions: 10,
),
);
}
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 DoubleKnobConfig page for more information.