diff --git a/src/components/fields/Numeric.js b/src/components/fields/Numeric.js
index 6c837ddff..f3a991298 100644
--- a/src/components/fields/Numeric.js
+++ b/src/components/fields/Numeric.js
@@ -20,6 +20,7 @@ export class UnconnectedNumeric extends Component {
           defaultValue={this.props.defaultValue}
           placeholder={placeholder}
           step={this.props.step}
+          stepmode={this.props.stepmode}
           min={this.props.min}
           max={this.props.max}
           onChange={this.props.updatePlot}
@@ -41,6 +42,7 @@ UnconnectedNumeric.propTypes = {
   hideArrows: PropTypes.bool,
   showSlider: PropTypes.bool,
   step: PropTypes.number,
+  stepmode: PropTypes.string,
   updatePlot: PropTypes.func,
   ...Field.propTypes,
 };
diff --git a/src/components/widgets/NumericInput.js b/src/components/widgets/NumericInput.js
index 9ad51e7b0..a47d51479 100644
--- a/src/components/widgets/NumericInput.js
+++ b/src/components/widgets/NumericInput.js
@@ -80,15 +80,17 @@ export default class NumericInput extends Component {
   }
 
   incrementValue(direction) {
-    const {defaultValue, min, step = 1} = this.props;
+    const {defaultValue, min, step = 1, stepmode = 'absolute'} = this.props;
     const {value} = this.state;
 
     let valueUpdate;
     if (isNumeric(value)) {
+      const x = parseFloat(value);
+      const absMode = stepmode === 'absolute';
       if (direction === 'increase') {
-        valueUpdate = parseFloat(value) + step;
+        valueUpdate = absMode ? x + step : x * (1 + step);
       } else {
-        valueUpdate = parseFloat(value) - step;
+        valueUpdate = absMode ? x - step : x / (1 + step);
       }
     } else {
       // if we are multi-valued and the user is incrementing or decrementing
@@ -176,6 +178,7 @@ NumericInput.propTypes = {
   showArrows: PropTypes.bool,
   showSlider: PropTypes.bool,
   step: PropTypes.number,
+  stepmode: PropTypes.string,
   value: PropTypes.any,
 };
 
diff --git a/src/default_panels/StyleTracesPanel.js b/src/default_panels/StyleTracesPanel.js
index f1ff4f740..fa1784836 100644
--- a/src/default_panels/StyleTracesPanel.js
+++ b/src/default_panels/StyleTracesPanel.js
@@ -56,7 +56,7 @@ const StyleTracesPanel = (props, {localize: _}) => (
       </ShowInLegend>
     </PlotlySection>
     <PlotlySection name={_('Cones & Streamtubes')}>
-      <Numeric label={_('Size')} attr="sizeref" />
+      <Numeric label={_('Size')} attr="sizeref" stepmode="relative" />
       <Dropdown
         label={_('Size Mode')}
         options={[{label: _('scaled'), value: 'scaled'}, {label: _('absolute'), value: 'absolute'}]}
@@ -243,13 +243,18 @@ const StyleTracesPanel = (props, {localize: _}) => (
       <MarkerColor suppressMultiValuedMessage label={_('Color')} attr="marker.color" />
       <NumericFraction label={_('Point Opacity')} attr="marker.opacity" />
       <MarkerSize label={_('Size')} attr="marker.size" />
+      <NumericReciprocal
+        label={_('Size Scale')}
+        attr="marker.sizeref"
+        step={0.2}
+        stepmode="relative"
+      />
       <Radio
         label={_('Size Mode')}
         attr="marker.sizemode"
         options={[{label: _('Area'), value: 'area'}, {label: _('Diameter'), value: 'diameter'}]}
       />
       <Numeric label={_('Minimum Size')} attr="marker.sizemin" />
-      <NumericReciprocal label={_('Size Scale')} attr="marker.sizeref" />
       <SymbolSelector label={_('Symbol')} attr="marker.symbol" />
       <Numeric label={_('Border Width')} attr="marker.line.width" />
       <MultiColorPicker label={_('Border Color')} attr="marker.line.color" />