improved slider set range

2 files changed, 14 insertions, 7 deletions

diff --git a/web/share/js/kvm/stream.js b/web/share/js/kvm/stream.js
index 9a480187..d93401f5 100644
--- a/web/share/js/kvm/stream.js
+++ b/web/share/js/kvm/stream.js
@@ -592,14 +592,14 @@ export function Streamer() {
 				tools.slider.setValue($("stream-quality-slider"), state.streamer.encoder.quality);
 
 				if (state.features.h264 && __janus_enabled) {
-					__setValueAndLimits($("stream-h264-bitrate-slider"), state.streamer.h264.bitrate, state.limits.h264_bitrate);
+					__setLimitsAndValue($("stream-h264-bitrate-slider"), state.limits.h264_bitrate, state.streamer.h264.bitrate);
 					tools.el.setEnabled($("stream-h264-bitrate-slider"), true);
 
-					__setValueAndLimits($("stream-h264-gop-slider"), state.streamer.h264.gop, state.limits.h264_gop);
+					__setLimitsAndValue($("stream-h264-gop-slider"), state.limits.h264_gop, state.streamer.h264.gop);
 					tools.el.setEnabled($("stream-h264-gop-slider"), true);
 				}
 
-				__setValueAndLimits($("stream-desired-fps-slider"), state.streamer.source.desired_fps, state.limits.desired_fps);
+				__setLimitsAndValue($("stream-desired-fps-slider"), state.limits.desired_fps, state.streamer.source.desired_fps);
 				tools.el.setEnabled($("stream-desired-fps-slider"), true);
 
 				let resolution_str = __makeStringResolution(state.streamer.source.resolution);
@@ -675,10 +675,9 @@ export function Streamer() {
 		el_grab.innerHTML = el_info.innerHTML = title;
 	};
 
-	var __setValueAndLimits = function(el, value, limits) {
+	var __setLimitsAndValue = function(el, limits, value) {
+		tools.slider.setRange(el, limits.min, limits.max);
 		tools.slider.setValue(el, value);
-		el.min = limits.min;
-		el.max = limits.max;
 	};
 
 	var __clickModeRadio = function() {
diff --git a/web/share/js/tools.js b/web/share/js/tools.js
index 05ba7f0a..f2805fc3 100644
--- a/web/share/js/tools.js
+++ b/web/share/js/tools.js
@@ -184,8 +184,16 @@ export var tools = new function() {
 					el.__display_callback = display_callback;
 				}
 			},
-			"setValue": function(el, value) {
+			"setRange": function(el, min, max) {
+				let value = el.value;
+				el.min = min;
+				el.max = max;
 				if (el.value != value) {
+					self.slider.setValue(el, el.value, true);
+				}
+			},
+			"setValue": function(el, value, force=false) {
+				if (el.value != value || force) {
 					if (el.__pressed) {
 						el.__postponed = value;
 					} else {