diff --git a/css/gui/options.css b/css/gui/options.css
index b3e3b7f3e49ea47f07e18864503d41d402f17314..20bd60d0eccaabc6f21d981a87480a4145fd6c1f 100644
--- a/css/gui/options.css
+++ b/css/gui/options.css
@@ -122,6 +122,29 @@ div.options-group input.full-width {
 	}
 }
 
+/* slider */
+/* very static styling, won't work well on very small screens */
+.slider-div {
+	display: grid;
+	grid-template-columns: max-content max-content max-content auto;
+}
+
+.slider-div input[type="range"] {
+	width: 15em;
+}
+
+.slider-div span {
+	width: 8em;
+	align-self: center;
+	margin-left: 1em;
+}
+
+.slider-div span:first-child {
+	margin: 0 1em 0 0;
+	text-align: end;
+}
+
+
 /* other */
 .subHeading {
 	width: 85%;
diff --git a/src/events/intro/customizeSlaveTrade.js b/src/events/intro/customizeSlaveTrade.js
index 501c8fbd7b2c8220c105d00c09c724cc9d00a58a..28bca0ab46eed9430c4ada7801d8b73bcd3c519b 100644
--- a/src/events/intro/customizeSlaveTrade.js
+++ b/src/events/intro/customizeSlaveTrade.js
@@ -378,8 +378,10 @@ App.Intro.CustomSlaveTrade = function() {
 		options.customRefresh(refresh);
 
 		options.addSlider("Travel Friction Exponent", -2, 1, "travelFrictionExponent", dynamicModeSettings)
+			.setStep(0.01)
 			.addEndLabels("Global", "Local").addTextBox();
 		options.addSlider("Population Scale Factor", 1, 50, "popScaleFactor", dynamicModeSettings)
+			.setStep(0.1)
 			.addEndLabels("Homogenous", "Diverse").addTextBox();
 
 		options.addOption("Debug View", "debugView", dynamicModeSettings)
diff --git a/src/gui/options/optionsGroup.js b/src/gui/options/optionsGroup.js
index ff21e149ec975d82abe9d60af86f01da032ac606..848ad8818b7383942ce39b5d72e3ddffd6bd9bf7 100644
--- a/src/gui/options/optionsGroup.js
+++ b/src/gui/options/optionsGroup.js
@@ -548,9 +548,10 @@ App.UI.OptionsGroup = (function() {
 
 			/* right side */
 			const div = document.createElement("div");
+			div.classList.add("button-group", "slider-div");
 
 			if (this.endLabels !== null) {
-				div.append(this.endLabels[0]);
+				App.UI.DOM.appendNewElement("span", div, this.endLabels[0]);
 			}
 
 			// Create slider first, so textbox can reference it
@@ -560,8 +561,10 @@ App.UI.OptionsGroup = (function() {
 			if (this.textbox) {
 				// Create textbox, using reference to slider
 				textbox = App.UI.DOM.makeTextBox(this.object[this.property], input => {
-					this.object[this.property] = input;
+					// Run input through slider to ensure it's a valid value.
 					slider.value = String(input);
+					this.object[this.property] = parseFloat(slider.value);
+					textbox.value = this.object[this.property];
 				}, true);
 				textbox.classList.add("number");
 			}
@@ -574,7 +577,6 @@ App.UI.OptionsGroup = (function() {
 			slider.value = String(this.object[this.property]);
 
 			slider.oninput = () => {
-				console.log("slider.value", slider.value);
 				this.object[this.property] = parseFloat(slider.value);
 				if (textbox !== null) {
 					textbox.value = this.object[this.property];
@@ -585,7 +587,7 @@ App.UI.OptionsGroup = (function() {
 			div.append(slider);
 
 			if (this.endLabels !== null) {
-				div.append(this.endLabels[1]);
+				App.UI.DOM.appendNewElement("span", div, this.endLabels[1]);
 			}
 
 			if (textbox !== null) {