Frage zum Wiki-Artikel „number“

[Rolf B]

Hallo TM,

ein Schieberegler input[type=range] wäre dafür sicherlich angemessen, hat aber eine Menge eigener Probleme.

von 0-100 in Prozent (bis zweite Kommastelle xx,xxx)

1-100 in Prozent verstehe ich, die "zweite Kommastelle xx,xxx" dagegen nicht.

Genauer als auf 1% wirst Du keine Eingabe hinbekommen, zumindest nicht geräteübergreifend, und ich kann mir keinen Fragebogen vorstellen, wo ein Wert auf einer Skala von 1-100 genauer als Schrittweite 1 einzustellen ist. Wenn man sowas braucht, wäre ein Zahleneingabefeld sinnvoller.

Die Darstellung eines Schiebereglers obliegt allerdings dem Browser, und jeder macht es anders. Man kann in Grenzen mit CSS daran herumstylen, allerdings ist das nicht gut unterstützt, es ist sehr browserspezifisch und ich würde das lassen. Ana Tudor auf css-tricks.com übertitelte ihren Artikel dazu nicht ohne Grund "A Sliding Nightmare". Wobei das Artikellayout an sich ebenfalls ein Alptraum ist...

Ein weiteres Problem ist die vertikale Orientierung. Auch das ist schlecht bis gar nicht unterstützt, bzw. Du musst mit einem CSS Transform das Ding um 90° drehen.

Zusammen mit dem "Thumb ausblendbar" Problem bist Du vermutlich mit einem selbstgeschriebenen Slider besser bedient. Ich kann Dir keine fertige Lib empfehlen - und man sollte das auch nicht unterschätzen. Das muss ja mit Maus, Tastatur und Touch bedienbar sein (zu Spracheingabe trau ich mich gar nichts zu sagen).

Am leichtesten tust Du Dich, wenn Du davon Abstand nimmst, die vorgefertigten Schieberegler zu vergewaltigen und möglichst beim Standard bleibst. Das funktioniert dann auf den meisten Plattformen am besten.

Einen Anfangswert für den Regler soll es nicht geben, erst wenn der Proband draufklickt kann der Regler auf dieser Position - zum evtl. verschieben sichtbar werden.

Ein Foto zeigt nicht, was beim Draufklicken passiert. Es zeigt einen ausgegraute und einen aktive Skala, ohne Schieber. Das Ausblenden des Schiebers ist Teil des Styling-Problems, das wirst Du mit einem input[type=range] nicht plattformübergreifend lösen können.

Ich denke, diese Anforderung kannst Du nur behelfsweise umsetzen. Du müsstest einen Button haben, auf den man klickt und der dann durch den Schieber ersetzt wird. Allerdings braucht der Schieber dann einen Startwert. Den kannst Du zwar aus der Position ableiten, wo man auf den Button geklickt hat - aber nur dann, wenn auch ein Klick stattfand. Ich denke, es geht Dir darum, keinen suggestiven Anfangswert zu setzen. Aber das wird nur mit einem selbstgeschriebenen Slider machbar sein.

Ich lasse mich gern eines anderen belehren 😉

Rolf