Schieberegler oder verschiebbare Bilder

[#74]

Hallo,

ich möchte ein Bild eines Mischpultes erzeugen, bei dem die zehn Schieber der Regler mit der Maus verschiebbar sein sollen.
Dabei geht es nicht um die Ausgabe von Werten sondern um die Position der Regler auf der Skala, was dann idealerweise noch als Bild abgespeichert werden kann. Das ganze soll ein pädagogisches Feedback Tool werden.

Kann ich das mit HTML und CSS hinkriegen?

Vielen Dank für eure Hilfe!

 

[threadi]

Schau dir mal dieses HTML-Element an:

<input type="range"> - HTML: HyperText Markup Language | MDN

<input> elements of type range let the user specify a numeric value which must be no less than a given value, and no more than another given value. The precise value, however, is not considered important. This is typically represented using a slider or dial control rather than a text entry box...

developer.mozilla.org

 

[#74]

Danke dir für die schnelle Antwort!
Darauf war ich allerdings auch schon gestossen. Rein theoretisch allerdings, ich habe es noch nicht ausprobiert. Es scheint mir problematisch, diese Schieberegler umzudesignen.

Ich habe die Bilder für die Schieberegler schon gemacht und möchte diese gerne verwenden.

Es geht mir darum, dass Bilder entlang einer Linie verschiebbar sind.

 

[threadi]

Das Styling ist durchaus herausfordernd - aber möglich wenn man sich etwas in seinen Anforderungen begrenzt. Schau mal hier nach ob dir das hilft:

Styling Cross-Browser Compatible Range Inputs with CSS | CSS-Tricks

Styling for range inputs has improved dramatically since the release of IE 10. It is now possible to generate cross-browser compatible range inputs (sliders)

css-tricks.com

Auch hier wurde mit background-image gearbeitet: https://ethercycle.com/blog/328

Alternativ dazu müsstest Du so etwas komplett selbst bauen da HTML, CSS und JavaScript das nicht in anderer Form bereitstellt.