diff --git a/scripts/system/settings/qml_widgets/SettingSlider.qml b/scripts/system/settings/qml_widgets/SettingSlider.qml
new file mode 100644
index 0000000000..6d06a388cd
--- /dev/null
+++ b/scripts/system/settings/qml_widgets/SettingSlider.qml
@@ -0,0 +1,98 @@
+import QtQuick 2.7
+import QtQuick.Controls 2.5
+import QtQuick.Controls.Styles 1.4
+import QtQuick.Layouts 1.3
+
+Item {
+	id: root;
+	property string settingText: "";
+	property var settingValue: 0;
+
+	property real minValue: 0;
+	property real maxValue: 9;
+	property real sliderStepSize: 0.1;
+	property int roundDisplay: 1;
+
+	signal sliderValueChanged(real value);
+
+	height: 50;
+	width: parent.width;
+
+	RowLayout {
+		width: parent.width - 10;
+		height: parent.height;
+		anchors.horizontalCenter: parent.horizontalCenter;
+		Layout.alignment: Qt.AlignTop;
+
+		Text {
+			id: settingTextElem
+			height: parent.height;
+			text: settingText;
+			color: "white";
+			font.pointSize: 14;
+			Layout.fillWidth: true;
+		}
+
+		RowLayout {
+			Layout.alignment: Qt.AlignRight;
+			width: 225;
+			implicitWidth: 225;
+			height: parent.height;
+			Layout.fillWidth: false;
+
+			Text {
+				id: sliderValueDisplay
+				text: slider.value.toFixed(roundDisplay);
+				color: "white";
+				height: parent.height;
+				verticalAlignment: Qt.AlignVCenter
+				width: 25;
+				font.pointSize: 14;
+			}
+
+			Slider {
+				Layout.fillWidth: true;
+				height: parent.height;
+				id: slider;
+				from: minValue;
+				to: maxValue;
+				stepSize: sliderStepSize;
+				snapMode: Slider.SnapOnRelease;
+				value: settingValue;
+
+				handle: Rectangle {
+					x: slider.leftPadding + slider.visualPosition * (slider.availableWidth - width)
+					y: slider.topPadding + slider.availableHeight / 2 - height / 2
+					implicitWidth: 5
+					implicitHeight: 20
+					color: "#5153bd"
+				}
+
+				background: Rectangle {
+					x: slider.leftPadding
+					y: slider.topPadding + slider.availableHeight / 2 - height / 2
+					implicitWidth: 200
+					implicitHeight: 20
+					width: slider.availableWidth
+					height: implicitHeight
+					radius: 2
+					color: "white"
+					clip: true;
+
+					Rectangle {
+						width: slider.visualPosition * parent.width
+						height: parent.height
+						color: "#5153bd"
+						radius: 2
+					}
+				}
+
+				onValueChanged: {
+					sliderValueChanged(value)
+				}
+			}
+
+
+		}
+	}
+}
\ No newline at end of file
diff --git a/scripts/system/settings/settings.qml b/scripts/system/settings/settings.qml
index ced9fe56bf..7e54cdde9a 100644
--- a/scripts/system/settings/settings.qml
+++ b/scripts/system/settings/settings.qml
@@ -237,65 +237,29 @@ Rectangle {
 				}
 
 				// Resolution Scale
-				RowLayout {
-					width: parent.width
+				SettingSlider {
+					settingText: "Resolution scale";
+					sliderStepSize: 0.1;
+					minValue: 0.1;
+					maxValue: 2;
+					settingValue: Render.viewportResolutionScale.toFixed(1)
 
-					Text {
-						text: "Resolution Scale"
-						color: "white"
-						height: parent.height
-						width: parent.width - 150
-						font.pointSize: 14
-						Layout.fillWidth: true
-					}
-
-					Text {
-						text: parent.children[2].value.toFixed(1)
-						color: "white"
-					}
-
-					Slider {
-						id: resolution_slider
-						from: 0.1
-						to: 2
-						value: Render.viewportResolutionScale.toFixed(1)
-						stepSize: 0.1
-
-						onValueChanged: {
-							Render.viewportResolutionScale = value
-						}
+					onSliderValueChanged: {
+						Render.viewportResolutionScale = value.toFixed(1)
 					}
 				}
 
 				// FOV
-				RowLayout {
-					width: parent.width
+				SettingSlider {
+					settingText: "Feild of View";
+					sliderStepSize: 1;
+					minValue: 20;
+					maxValue: 130;
+					settingValue: Render.verticalFieldOfView.toFixed(1);
+					roundDisplay: 0;
 
-					Text {
-						text: "FOV"
-						color: "white"
-						height: parent.height
-						width: parent.width - 150
-						font.pointSize: 14
-						Layout.fillWidth: true
-					}
-
-					Text {
-						text: parent.children[2].value.toFixed(0)
-						color: "white"
-					}
-
-					// FIXME: QML Slider binding loop
-					Slider {
-						id: fov_slider
-						from: 20
-						to: 130
-						value: Render.verticalFieldOfView.toFixed(1) // TODO: Need to set to Overte default
-						stepSize: 1
-
-						onValueChanged: {
-							Render.verticalFieldOfView = value
-						}
+					onSliderValueChanged: {
+						Render.verticalFieldOfView = value.toFixed(1);
 					}
 				}