Hallo,
ich bin neu hier und wollte mit kurz vorstellen. Ich heisse Mathias und arbeite an einem Webserver Projekt.
Ziel ist es über einen Browser einen DSP zu Steuern. Hardware ist gebaut, Programmiert, DSP Firmware hab ich auch erstellt.
Es funktioniert sogar relativ realtime über AJAX. 
(Ich habe mit Webprogrammierung nicht viel zu tun, daher vergebt mir sollte mein Code etwas unoptimiert sein)
Aber ich verzweifle an einem Rangeslider den ich über CSS um 270° gedreht habe 
Da ich ein Reponsiv Design verwende scheint er durch die Drehung um 270° nun auch Höhe und Breite zu tauschen.
Das heiss, ist mein Bildschirm in der Höhe immer gleich und ich Strecke in der Breite wird mein Rangeslider höher.
Habe es schon versucht über Viewport. War etwas besser aber dann ist mein restliches Design zerstört.
Was kann ich da machen?
HTML
<html>
<head>
<meta name="viewport" charset="utf-8" content="height=device-height, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi" />
<title>WEB-Remote</title>
</head>
<body bgcolor="#E6E6FA" onload= "init()">
<style>
.table {display: table; width: 90%; height: 90%; margin: auto;}
.tr {display: table-row; vertical-align:center; height:1%; margin: auto;}
.td {display: table-cell; text-align:center; vertical-align:middle; border-width: 3px; border-style: solid;}
.tr_head {display: table-row; vertical-align:center; height:10%; margin: auto;}
.tr_Fader {display: table-row; vertical-align:center; margin: auto; height: 60%; }
.tr_HZ {display: table-row; vertical-align:center; height:5%; margin: auto;}
.tr_pegel {display: table-row; vertical-align:center; height:10%; margin: auto;}
.tr_vol {display: table-row; vertical-align:center; height:10%; margin: auto;}
.head_font {font-family: Arial; font-size: 100%; font-weight: 900; }
.fader_vertical {transform: rotate(270deg); margin: auto; width: 50vh;}
.fader_horizontal {width: 100%; margin: auto; cursor: pointer;}
.myprogress {position: relative; width: 100%; height: 100%; background-color: #ddd;}
.mybar {position: absolute; width: 1%; height: 100%; background-color: #4CAF50;}
</style>
<script language="JavaScript">
var volume_value = 0;
var pegel_value = 0;
var anzeige_value = 0;
var eq_70hz_boost_db = 0;
var eq_1khz_boost_db = 0;
var eq_4khz_boost_db = 0;
var q_factor = 1.3;
var eq_res_70hz, eq_res_1khz, eq_res_4khz;
function filter_berechnung(boost, Q, freq) {
var samplefreq = 48000;
var A = Math.pow(10,(boost/40));
var w0 = 2*3.141592654*freq/samplefreq;
var alpha = (Math.sin(w0))/(2*Q);
var skal_factor = 8388608;
var a0 = 1+alpha/A;
var b2 = Math.round(((1-alpha*A)/a0)*skal_factor);
var b1 = Math.round(((-2*(Math.cos(w0)))/a0)*skal_factor);
var b0 = Math.round(((1+alpha*A)/a0)*skal_factor);
var a2 = Math.round(((1-alpha/A)/a0*(-1))*skal_factor);
var a1 = Math.round(((-2*(Math.cos(w0)))/a0*(-1))*skal_factor);
return {b0: b0, b1: b1, b2: b2, a1: a1, a2: a2};
}
function page_update() {
wertupdate();
if (pegel_value > 450000) {
anzeige_value = 100;
}
else {
anzeige_value = pegel_value / 100; //4500
}
document.getElementById("mybar").style.width = anzeige_value + '%';
}
function wertupdate() {
var boost70, boost1k, boost4k, vol;
send_ajax("/pegel_req/");
vol = document.getElementById("volume_slider").value;
if (volume_value != vol) {
volume_value = vol;
send_ajax("slidervalue="+volume_value+"/");
}
boost70 = document.getElementById("fader_70hz").value;
if (eq_70hz_boost_db != boost70) {
eq_70hz_boost_db = boost70;
eq_res_70hz = filter_berechnung(eq_70hz_boost_db, q_factor, 70);
send_ajax("/70Hz_b0="+eq_res_70hz.b0+"/70Hz_b1="+eq_res_70hz.b1+"/70Hz_b2="+eq_res_70hz.b2+"/70Hz_a1="+eq_res_70hz.a1+"/70Hz_a2="+eq_res_70hz.a2+"/");
}
boost1k = document.getElementById("fader_1khz").value;
if (eq_1khz_boost_db != boost1k) {
eq_1khz_boost_db = boost1k;
eq_res_1khz = filter_berechnung(eq_1khz_boost_db, q_factor, 1000);
send_ajax("/1KHz_b0="+eq_res_1khz.b0+"/1KHz_b1="+eq_res_1khz.b1+"/1KHz_b2="+eq_res_1khz.b2+"/1KHz_a1="+eq_res_1khz.a1+"/1KHz_a2="+eq_res_1khz.a2+"/");
}
boost4k = document.getElementById("fader_4khz").value;
if (eq_4khz_boost_db != boost4k) {
eq_4khz_boost_db = boost4k;
eq_res_4khz = filter_berechnung(eq_4khz_boost_db, q_factor, 4000);
send_ajax("/4KHz_b0="+eq_res_4khz.b0+"/4KHz_b1="+eq_res_4khz.b1+"/4KHz_b2="+eq_res_4khz.b2+"/4KHz_a1="+eq_res_4khz.a1+"/4KHz_a2="+eq_res_4khz.a2+"/");
}
}
function send_ajax(data) {
xmlhttp=new XMLHttpRequest(); // AJAX nutzen mit IE7+, Chrome, Firefox, Safari, Opera
xmlhttp.open("GET",data,true);
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
var rtx = xmlhttp.responseText;
var signalval_match = rtx.match(/signal_value=(\d+)/);
pegel_value = signalval_match[1];
page_update();
}
}
xmlhttp.send();
}
function init() {
setInterval("page_update()",1000);
//var vol_slider = document.getElementById("volume_slider");
//slider.addEventListener('onchange', function () )
}
</script>
<table class="table">
<tbody>
<tr class="tr_head">
<td class="td" colspan="3">
<div class="head_font">Web-Remote</div>
</td>
</tr>
<tr class="tr_Fader">
<td class="td">
<input id="fader_70hz" type="range" class="fader_vertical" min="-12" max="12" value="0" step="1"></input>
</td>
<td class="td">
<input id="fader_1khz" type="range" class="fader_vertical" min="-12" max="12" value="0" step="1"></input>
</td>
<td class="td">
<input id="fader_4khz" type="range" class="fader_vertical" min="-12" max="12" value="0" step="1"></input>
</td>
</tr>
<tr class="tr_HZ">
<td class="td">
<div>70Hz</div>
</td>
<td class="td">
<div>1KHz</div>
</td>
<td class="td">
<div>4KHz</div>
</td>
</tr>
<tr class="tr_pegel">
<td class="td" colspan="3">
<div class="myprogress" id="myprogress">
<div class="mybar" id="mybar"></div>
</div>
</td>
</tr>
<tr class="tr_vol">
<td class="td" colspan="3">
<input id="volume_slider" type="range" class="fader_horizontal"></input>
</td>
</tr>
</tbody>
</table>
</body>
</html>