Range

The Range control is a slider that let a user choose a value between a minimum and a maximum, and that's the default control.

It has more properties than the typical control:

All Common control props properties, plus:

Name	Description
maxValue number, optional, default 100	The value corresponding to the end of the range.
minValue number, optional, default 0	The value corresponding to the beginning of the range.
name string, optional	The name of the control. If not specified, label is used.
shouldDisplayLabel boolean, default true	Whether the label should be displayed.
shouldDisplayMaxValue boolean, default true	Whether the maximum value should be displayed to the right of the range.
shouldDisplayMinValue boolean, default true	Whether the minimum value should be displayed to the left of the range.
shouldDisplayValue boolean, default true	Whether the value should be displayed next to the label.
shouldDisplaySlider boolean, default true	Whether the slider should be displayed. If the slider is not displayed, the min and max values are also hidden.
step number, optional, default 1	The amount by which the value will be incremeneted or decremented when moving the range cursor.

Choose a value: 0

100

<Model
  showTimer={false}
  initialParams={{ value: 0 }}
  controls={{
    type: 'range',
    label: 'Choose a value',
    name: 'range',
    param: 'value',
  }}
/>