From 4741bea6c5b15c9483cd443f24ab4b7e68f7e8a8 Mon Sep 17 00:00:00 2001
From: Til Schmitter <til.schmitter@gmail.com>
Date: Wed, 8 Apr 2026 19:52:56 +0200
Subject: [PATCH] music eq sliders

---
 copyparty/web/browser.css | 12 ++++++++++--
 copyparty/web/browser.js  | 20 +++++++++++---------
 2 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/copyparty/web/browser.css b/copyparty/web/browser.css
index ba8c8e83..4ac94081 100644
--- a/copyparty/web/browser.css
+++ b/copyparty/web/browser.css
@@ -1474,7 +1474,7 @@ html.y #ops svg circle {
 }
 .opbox input {
 	position: relative;
-	margin: .5em;
+	margin: .2em;
 }
 #op_cfg input[type=text] {
 	top: -.3em;
@@ -1530,8 +1530,16 @@ html.dz input {
 .opview input.i {
 	width: calc(100% - 16.2em);
 }
+input.eq_gain[type=range]{
+	writing-mode: vertical-lr;
+    direction: rtl;
+	color: var(--a);
+}
+input.eq_gain[type=text]{
+    width: 1.5em;
+	text-align: center;
+}
 input.drc_v,
-input.eq_gain,
 input.ssconf_v {
 	width: 3em;
 	text-align: center;
diff --git a/copyparty/web/browser.js b/copyparty/web/browser.js
index dc54c258..28462aa8 100644
--- a/copyparty/web/browser.js
+++ b/copyparty/web/browser.js
@@ -2861,9 +2861,9 @@ var afilt = (function () {
 		swrite('au_eq_amp', r.amp);
 		swrite('au_eq_chw', r.chw);
 
-		var txt = QSA('input.eq_gain');
+		var gains = QSA('input.eq_gain');
 		for (var a = 0; a < r.bands.length; a++)
-			txt[a].value = r.gains[a];
+			gains[a + gains.length / 2].value = gains[a].value = r.gains[a].toFixed(1);
 
 		QS('input.eq_gain[band="amp"]').value = r.amp;
 		QS('input.eq_gain[band="chw"]').value = r.chw;
@@ -3054,7 +3054,7 @@ var afilt = (function () {
 				vs = that.value,
 				v = parseFloat(vs);
 
-			if (!isNum(v) || v + '' != vs)
+			if (!isNum(v) || (v + '' != vs && v.toFixed(1) != vs))
 				throw new Error('inval band');
 
 			if (sb == 'amp')
@@ -3138,9 +3138,9 @@ var afilt = (function () {
 		ebi('h_drc').textContent = f2f(r.drcn.reduction, 1);
 	}
 
-	var html = ['<table><tr><td rowspan="4">',
+	var html = ['<table><tr><td rowspan="5">',
 		'<a id="au_eq" class="tgl btn" href="#" tt="' + L.mt_eq + '">' + L.enable + '</a></td>'],
-		h2 = [], h3 = [], h4 = [];
+		h2 = [], h3 = [], h4 = [], h5 = [];
 
 	var vs = [];
 	for (var a = 0; a < r.bands.length; a++) {
@@ -3156,15 +3156,17 @@ var afilt = (function () {
 
 	for (var a = 0; a < vs.length; a++) {
 		var b = vs[a][0];
-		html.push('<td><a href="#" class="eq_step" step="0.5" band="' + b + '">+</a></td>');
-		h2.push('<td>' + vs[a][1] + '</td>');
+		html.push('<td>' + vs[a][1] + '</td>');
+		h2.push('<td><a href="#" class="eq_step" step="0.5" band="' + b + '">+</a></td>');
+		h3.push('<td><input class="eq_gain" type="range" min="-6" max="6" step="0.5" orient="vertical" band="' + b + '" value="' + vs[a][2] + '" /></td>');
 		h4.push('<td><a href="#" class="eq_step" step="-0.5" band="' + b + '">&ndash;</a></td>');
-		h3.push('<td><input type="text" class="eq_gain" ' + NOAC + ' band="' + b + '" value="' + vs[a][2] + '" /></td>');
+		h5.push('<td><input class="eq_gain" type="text" ' + NOAC + ' band="' + b + '" value="' + vs[a][2] + '" /></td>');
 	}
 	html = html.join('\n') + '</tr><tr>';
 	html += h2.join('\n') + '</tr><tr>';
 	html += h3.join('\n') + '</tr><tr>';
-	html += h4.join('\n') + '</tr><table>';
+	html += h4.join('\n') + '</tr><tr>';
+	html += h5.join('\n') + '</tr><table>';
 	ebi('audio_eq').innerHTML = html;
 
 	h2 = [];