Index: sources/gui/qml/pages/treatment/sections/TreatmentFlowsComponent.qml
===================================================================
diff -u -rd70b0372a4457f36abedd3034f237d6e0cafa111 -rc749ecd5dc413ce091250af652ccba4d96f7a582
--- sources/gui/qml/pages/treatment/sections/TreatmentFlowsComponent.qml	(.../TreatmentFlowsComponent.qml)	(revision d70b0372a4457f36abedd3034f237d6e0cafa111)
+++ sources/gui/qml/pages/treatment/sections/TreatmentFlowsComponent.qml	(.../TreatmentFlowsComponent.qml)	(revision c749ecd5dc413ce091250af652ccba4d96f7a582)
@@ -11,49 +11,57 @@
 import "qrc:/pages/treatment"
 
 Rectangle { id: _root
+    objectName: "_TreatmentFlowsComponent"
 
-    property string title           : ""
-    property string value           : ""
-    property string unitText        : ""
-    property string extraText       : ""
+    property string title               : ""
+    property string unitText            : ""
+    property string extraText           : ""
+    property alias  value               : _rangedValue.rawValue
+    property alias  minimum             : _rangedValue.rawMin
+    property alias  maximum             : _rangedValue.rawMax
+    property alias  step                : _rangedValue.rawStep
+    property alias  precision           : _rangedValue.precision
+    property bool   showButtons         : true
+    property bool   buttonsEnabled      : true
+    property bool   dropShadowEnabled   : true
 
-    property bool showButtons       : true
-    property bool buttonsEnabled    : true
-    property bool dropShadowEnabled : true
-
     color   : Colors.mainTreatmentLighterBlue
     radius  : 5
 
-    signal increment()
-    signal decrement()
+    signal increment(real newValue)
+    signal decrement(real newValue)
 
+    RangedValue { id: _rangedValue
+        objectName: "_rangedValue"
+    }
+
     Text { id: _title
         objectName: "title"
 
         anchors {
             horizontalCenter        : _root.horizontalCenter
-            horizontalCenterOffset  : Variables.defaultMargin * 1.5
             top                     : parent.top
             topMargin               :  Variables.defaultMargin
         }
 
         font {
-            pixelSize   : 28
-            weight      : Font.Normal
+            pixelSize   : Fonts.fontPixelContainerTitle
+            weight      : Font.Medium
         }
 
         width           : _root.width
         height          : Variables.contentHeight
         text            : _root.title
         color           : Colors.pressuresText
-        horizontalAlignment : Text.AlignLeft
+        horizontalAlignment : Text.AlignHCenter
     }
 
     Row { id: _row
         objectName: "row"
 
         anchors {
             top                 : _title.bottom
+            bottom              : _root.bottom
             horizontalCenter    : _root.horizontalCenter
         }
 
@@ -65,12 +73,33 @@
             }
             height                  : Variables.contentHeight
             width                   : Variables.treatmentFlowsComponentWidth
-            topText                 : value
+            topText                 : value !== undefined ? _root.value.toFixed(_root.precision) : Variables.emptyEntry
             topTextFont.pixelSize   : 60
-            topTextFont.weight      : Font.Medium
+            topTextFont.weight      : Font.Light
             bottomText              : _root.unitText
             bottomTextFont.pixelSize: 22
             bottomTextTopMargin     : Variables.defaultMargin
+
+            Text { id: _extraText
+                objectName: "extraText"
+
+                anchors {
+                    horizontalCenter: _value.horizontalCenter
+                    top          : parent.bottom
+                    topMargin    : Variables.defaultMargin * 4.5
+                }
+
+                font {
+                    pixelSize   : 28
+                    weight      : Font.Bold
+                }
+
+                text            : _root.extraText
+                width           : 40
+                height          : Variables.contentHeight
+                color           : Colors.mainTreatmentOrange
+                horizontalAlignment : Text.AlignHCenter
+            }
         }
 
         Column { id: _column
@@ -82,44 +111,22 @@
             ArrowButton {id : _upArrowIcon
                 objectName  : "upArrowIcon"
                 upArrow     : true
-                enabled     : buttonsEnabled
+                enabled     : buttonsEnabled && _rangedValue.canIncrement
 
-                onClicked   : _root.increment()
+                onClicked   : { _root.increment(_rangedValue.incrementedValue()) }
             }
 
             ArrowButton {id : _downArrowIcon
                 objectName  : "downArrowIcon"
                 downArrow   : true
-                enabled     : buttonsEnabled
+                enabled     : buttonsEnabled && _rangedValue.canDecrement
 
-                onClicked   : _root.decrement()
+                onClicked   : { _root.decrement(_rangedValue.decrementedValue()) }
             }
         }
     }
 
-    Text { id: _extraText
-        objectName: "extraText"
-
-        anchors {
-            left            : _root.left
-            leftMargin      : Variables.defaultMargin * 3
-            bottom          : _root.bottom
-            bottomMargin    : 10
-        }
-
-        font {
-            pixelSize   : 28
-            weight      : Font.Bold
-        }
-
-        text            : _root.extraText
-        width           : 40
-        height          : Variables.contentHeight
-        color           : "orange"
-        horizontalAlignment : Text.AlignHCenter
-    }
-
-    layer.enabled   : _root.dropShadowEnabled
+    layer.enabled   : _root.dropShadowEnabled && _root.showButtons
     layer.effect    : DropShadow { id: _dropShadow
         horizontalOffset: 3
         verticalOffset  : 3