Software und Hardware » Zwei slider via javascript?

#1 von SAH , 27.10.2019 10:09

Guten Morgen liebe Teilnehmer,

im Rahmen meiner Präsentationen zu Erfahrungsberichten bzw. im FAQ-Bereich habe jeweils einen "interaktiven Zuganzeiger".
Mit diesem Tool kann man bei vorgegebener Zugmasse und Wagentyp sich anzeigen lassen (also mit Bildern und weiteren Angaben), wie lange der Zug sein kann. Dabei benutze ich für die Streckensteigung in Promille einen Slider, der bis 150 Promille geht (er orientiert sich an Modellbahngegebrnheiten). Dieser Slider Funktioniert soweit fehlerfrei.
Nun möchte ich aufgrund erweiterter Daten bei den Wageneigenschaften einen zweiten Slider für Radien einführen. Doch sobald ich das versuche, funktioniert gar nichts mehr. Ich bin daher an dieser Stelle steckengeblieben und frage deshalb nach Rat bzw. bitte um Hilfestellung.

Mit freundlichen Grüßen,
Stephan-Alexander Heyn

#2 von Murrrphy , 27.10.2019 10:39

Ohne Deinen Code zu kennen ist eine Antwort oder Hilfestellung mit Deinen Angaben so schlicht nicht möglich.

Wende Dich vielleicht auch besser an ein dediziertes Fachforum für Webentwicklung.

#3 von planet-hope , 27.10.2019 15:04

Zitat

Ohne Deinen Code zu kennen ist eine Antwort oder Hilfestellung mit Deinen Angaben so schlicht nicht möglich.

Damit hat Achim recht.

Ich bin Software-Entwickler, u. a. auch für Web-Entwicklung. Wenn du möchtest, kann ich mir das mal ansehen.

#4 von Analogbahner , 27.10.2019 15:11

Javascript heißt: das Programm läuft z.B. in einem Browser? Meine Vorredner haben Recht: z.Z. gibt es Null Information darüber, womit, wie, auf was oder wo das läuft...

#5 von SAH , 27.10.2019 17:57

Guten Abend zusammen,

herzlichen Dank für Eure Antworten. Für einen ersten Einblick habe ich folgendes URL:
interaktiver Wagenzahlrechner.

mit freundlichen Grüßen,
Stephan-Alexander Heyn

#6 von Analogbahner , 28.10.2019 14:57

Interessant! Ist aber noch lange nicht "rund"... Dennoch toller Ansatz!

#7 von Murrrphy , 28.10.2019 15:03

Zitat

herzlichen Dank für Eure Antworten. Für einen ersten Einblick habe ich folgendes URL:
interaktiver Wagenzahlrechner.

Das beantwortet leider die Fragen nicht. So ist zielgerichtete Hilfestellung nicht möglich. Wir brauchen den kompletten Code, inkl. des Parts der nicht funktioniert, dann kann man vielleicht weiterhelfen und was sehen.

So ist es nur, als wenn Du Deinen Automechaniker anrufst und ihn fragst, wo Du jetzt schrauben sollst, weil Dein Auto klappert. Da tappt man einfach nur im Dunklen.

#8 von Analogbahner , 28.10.2019 15:20

Ich schätze mal, du gibst die Zugkraft der Lok vor, dividierst sie durch die Anzahl der Wagentypen: so kommst du auf die Anzahl der möglich gezogenen Wagen. Dann gibst du eine Funktion vor, die die Abnahme der Zugkraft bei bestimmter Steigung berechnet. Alles natürlich nur bei gemessenen Masse- und Zugkraft-Werten. Das klingt sehr linear, das heißt, ein zweiter Wert (=Slider) kann so vielleicht nicht eingepflegt werden. Wenn du einen Radius mit einbauen möchtest, solltest du auch Messwerte aller Steigungen mit allen Radien vorliegen haben. Ansonsten wäre das wenig wissenschaftlich, denn theoretisch mag das funktionieren, in der Praxis werden die echten Werte sicher anders. Du brauchst immer zwei Eingabewerte vom Nutzer. Fehlt ein Wert, so muss dafür Null eingegeben werden (entweder Steigung null oder Radius null).

#9 von tibaum , 29.10.2019 14:05

Hallo,

Zitat

... Wir brauchen den kompletten Code, inkl. des Parts der nicht funktioniert, dann kann man vielleicht weiterhelfen und was sehen.

Im Firefox einen rechtsklick und dann "Seitenquelltext anzeigen". Im Explorer u.a. geht das sicher auch irgendwie.

Aber wozu barucht man den ganzen Code, er will doch nur wissen wie man zwei Slider anwendet. Zum Beispiel so:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;script&gt;
function slider1change(value) {
	document.getElementById("value1").innerHTML = value + "&amp;permil;";
}
 
function slider2change(value) {
	document.getElementById("value2").innerHTML = value + "g";
}
&lt;/script&gt;
  &lt;p&gt;Steigung:&lt;input type="range" min="0" max="30" value="0" id="slider1" onchange="slider1change(this.value)"&gt;&lt;b id="value1"&gt;0&amp;permil;&lt;/b&gt;&lt;/p&gt;
  &lt;p&gt;Gewicht: &lt;input type="range" min="0" max="2000" value="0" id="slider2" onchange="slider2change(this.value)"&gt;&lt;b id="value2"&gt;0g&lt;/b&gt;&lt;/p&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
 
 

Gruß
Timo

#10 von Analogbahner , 29.10.2019 14:10

Stephan hat leider nicht geschrieben, wo genau das Problem liegt. Ich habe mir die HTML, die Funktionen und "Slider.js" auch angeschaut. Es dürfte wohl weniger das Problem sein, einen zweiten Slider als GUI auf die Seite zu packen, als die Werte dahinter zu verknüpfen.

#11 von SAH , 29.10.2019 21:00

Guten Abend zusammen,

vielen Dank für Eure Beiträge, doch mir scheint mittlerweile einiges aus dem Ruder zu laufen. Daher möchte ich der Reihe nach antworten:
@ Achim: Du hast als Einziger eine definierte Frage mit Lösungsansätzen gestellt. Ich werde versuchen, Dir eine spezifizierte Antwort inkl. Screenshots zu geben und bitte daher um etwas Geduld.

@Jochen: die Problemstellung steht bereits im ersten Beitrag, dass ein Slider funktioniert, sobald ich den zweitenbSlider einbinden will, versagen beide ihren Dienst. Wie Du daraus dann auf die Wissenschaftlichkeit des Inhalts schlueßt ist schon abenteuerlich. Ich möchte Dir nahelegen, im selben Verzeichnis die Seite mit der Zugmassebestimmung zu den Begrifflichkeiten zu Rate zu ziehen. Daten von Wagen und Loks sind alle empirisch.

@Timo: wie ein zweiter slider zu nutzen ist, weiß ich schon, nur noch nicht, wie ich diesen zum Laufen bringe. Deinen Vorschlag hab ich als allererstes ausprobiert. Leider ohne Erfolg. Ich bitte auch Dich um etwas Geduld, bis die Screenshots da sind.

Mit freundlichen Grüßen,
Stephan-Alexander Heyn

#12 von tibaum , 30.10.2019 13:13

Hallo,

was für einen Browser verwendest Du und welche Version?

Gruß
Timo

#13 von SAH , 30.10.2019 13:21

Guten Tag Timo,

ich nutze Firefox zum Überprüfen meiner Programmierung zu Hause und Forefox/chrome um die Funktionen im Internet zu testen. Beide Browser in der jeweils aktuellen Version.

Mit freundlichen Grüßen,
Stephan-Alexander Heyn

#14 von Analogbahner , 30.10.2019 14:49

Ich gehe davon aus, dass du schon weißt, was du da tust. Das sollte keine Kritik sein. In der Regel kann man aber beliebig viele Slider auf eine Seite packen, denn sie sind ja nur graphische Bedienelemente. Sie haben dann eben keine Funktion, da sie mit keinen Werten verknüpft sind. Entweder beißen sich tatsächlich GUI-Elemente, oder verknüpfte Hintergrundwerte sind nicht eindeutig definiert - was ich deshalb auch annahm. Wenn das Problem aber nicht daran liegt und alle Wertepaare eindeutig definiert sind, dann ist es dann doch ein JS- oder ein Klassenproblem.

#15 von tibaum , 30.10.2019 17:26

Hallo,

dann verstehe ich nicht wo das Problem liegt, ich habe das Beispiel im Firefox erstellt und getestet. Diesen ganzen Krimskram mit slider.js kannst Du dir sparen, braucht man nicht.

Vielleicht kannst Du so mehr damit anfangen:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
 

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;/head&gt;
&lt;body&gt;
  
Slider1: &lt;input type="range" min="0" max="150" value="0" id="slider1" onchange="change()" style="width:250px"&gt;&lt;br&gt;
Slider2: &lt;input type="range" min="0" max="100" value="0" id="slider2" onchange="change()" style="width:250px"&gt;
&lt;br&gt;&lt;br&gt;
&lt;div id="value1" value="0"&gt; Wert1 = 0 &lt;/div&gt;
&lt;div id="value2" value="0"&gt; Wert1 = 0 &lt;/div&gt;
&lt;br&gt;
&lt;div id="result"&gt;Ergebnis= 0&lt;/div&gt;
 
&lt;script type="text/javascript"&gt;
 
function change() {
var value1 = document.getElementById('slider1').value;
var value2 = document.getElementById('slider2').value;
document.getElementById('value1').innerHTML="Wert1 = " + value1;
document.getElementById('value2').innerHTML="Wert2 = " + value2/100;
 
document.getElementById('result').innerHTML="Ergebnis= " + value1 * value2/100;
}                        
&lt;/script&gt;
 

&lt;/body&gt;
&lt;/html&gt;
 

 

Gruß
Timo

#16 von SAH , 08.11.2019 07:54

Guten Morgen Timo,

vielen Dank für den Hinweis, das mit type = "Range" war mir noch nicht bekannt (da ich bislang mit der selfhtml-Version 8.0 arbeitete wo es diese Type noch nicht gibt).
Muss ich nun probieren und für ältere Browser eine Alternative einfallen lassen (zum Probieren nutze ich da eine alte Firefox-Version).

mit freundlichen Grüßen,
Stephan-Alexander Heyn

Beiträge:	12.696
Registriert am:	06.06.2005
Homepage:	Link
Spurweite	H0, N, Z
Stromart	AC, DC, Digital, Analog

Beiträge:	8.857
Registriert am:	02.01.2006
Homepage:	Link
Gleise	C-Gleis
Spurweite	H0
Steuerung	CS 3 / MS 2
Stromart	AC, DC, Digital

Beiträge:	29
Registriert am:	12.03.2015
Spurweite	H0
Stromart	AC, Digital

Beiträge:	3.232
Registriert am:	14.09.2009

Beiträge:	12.696
Registriert am:	06.06.2005
Homepage:	Link
Spurweite	H0, N, Z
Stromart	AC, DC, Digital, Analog

RE: Zwei slider via javascript?

RE: Zwei slider via javascript?

RE: Zwei slider via javascript?

RE: Zwei slider via javascript?

RE: Zwei slider via javascript?

RE: Zwei slider via javascript?

RE: Zwei slider via javascript?

RE: Zwei slider via javascript?

RE: Zwei slider via javascript?

RE: Zwei slider via javascript?

RE: Zwei slider via javascript?

RE: Zwei slider via javascript?

RE: Zwei slider via javascript?

RE: Zwei slider via javascript?

RE: Zwei slider via javascript?

RE: Zwei slider via javascript?

Bitte geben Sie einen Grund für die Verwarnung an