# 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 accept `null` values.
- `context.knobs.doubleOrNull.slider()`: This variant allows you to enter a double value via a slider or set the value to `null`. It is useful when the property can be optional.

<Info>Widgetbook also offers support for input-based double knobs which are documented on the [Double Input Knob page](/knobs/double/input).</Info>

## Properties

In addition to the knob's [base properties](/knobs/overview#properties), the double slider knob includes the following properties:

<Accordion title="context.knobs.double.slider()" defaultOpen>
  <Property name="min" type="int" optional>
    The minimum value the slider can select. This defines the start of the slider's range. 
    Defaults to `0`.
  </Property>

  ---

  <Property name="max" type="int" optional>
    The maximum value the slider can select. This defines the end of the slider's range. 
    Defaults to `20`.
  </Property>

  ---

  <Property name="divisions" type="int" optional>
    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`. 
  </Property>
</Accordion>

## `context.knobs.double.slider()`

### Example

<iframe 
  src="https://preview.widgetbook.io/#/?path=knobpreview/double-slider-knob&panels=knobs" 
  width="100%"
  height="240px"
/>

### Usage

To use the double input knob, call the `context.knobs.double.slider()` method.

```dart title="Example: Double Slider Knob"
@UseCase(type: MyWidget, name: 'Default')
Widget buildUseCase(BuildContext context) {
  return MyWidget(
    value: context.knobs.double.slider( // [!code highlight]
      label: 'value', // [!code highlight]
      min: 0, // [!code highlight]
      max: 1, // [!code highlight]
      divisions: 10, // [!code highlight]
      initialValue: 0.2, // [!code highlight]
    ), // [!code highlight]
  );
}
```

## `context.knobs.doubleOrNull.slider()` 

### Example

<iframe 
  src="https://preview.widgetbook.io/#/?path=knobpreview/double-slider-nullable-knob&panels=knobs" 
  width="100%"
  height="240px"
/>

### Usage

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

```dart title="Example: Nullable Double Slider Knob"
@UseCase(type: MyWidget, name: 'Default')
Widget buildUseCase(BuildContext context) {
  return MyWidget(
    value: context.knobs.doubleOrNull.slider( // [!code highlight]
      label: 'value', // [!code highlight]
      min: 0, // [!code highlight]
      max: 1, // [!code highlight]
      divisions: 10, // [!code highlight]
    ), // [!code highlight]
  ); // [!code highlight]
}
```

## 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](/cloud/snapshots/multi-snapshot#multi-snapshot-for-knobs) and [AddonsConfigs](/cloud/snapshots/multi-snapshot#multi-snapshot-for-addons).
Please refer to the [DoubleKnobConfig page](/knobs/double/overview#multi-snapshot-support) for more information.