3
Range (Slider) Javascript mit Plus-Minus Buttons
Ich habe folgenden Slider, den ich gerne mit einem Plus/Minus Button erweitern möchte, damit man genauere Einstellungen vornehmen kann.
Hat jemand einen Tipp, wie ich das hinbekomme?
Aktuell habe ich einen Slider der auch einwandfrei funktioniert, jedoch ist der auf einem Smartphone relativ ungenau, wenn es um einen größeren Bereich (min/max) geht.
Vielen Dank für jede Hilfe.
Hat jemand einen Tipp, wie ich das hinbekomme?
Aktuell habe ich einen Slider der auch einwandfrei funktioniert, jedoch ist der auf einem Smartphone relativ ungenau, wenn es um einen größeren Bereich (min/max) geht.
<input type="range" min="4" max="50" step="0.5" class="range" ng-init="slider=0" ng-model="slider" onchange="(document.BEISPIEL.feld1.value=this.value);">
<div>{{slider}} Ausgabewert</div>Vielen Dank für jede Hilfe.
Share on Facebook
Share on Twitter
Share on Reddit
Share on LinkedinPlease also mark the comments that contributed to the solution of the article
Content-Key: 321283
Url: https://administrator.de/contentid/321283
Printed on: April 16, 2024 at 22:04 o'clock
3 Comments
Latest comment
Hallo internet2107.
Dazu musst du nur den
Anstelle der
~Arano
Dazu musst du nur den
value der Range um den step erhöhen(addieren/+) oder verringern(subtrahieren/1).<input type="range" min="4" max="50" step="0.5" value="12.5" id="rng"
onchange="document.getElementById('dsp').innerHTML=this.value;">
<div id="dsp">12.5</div>
<span onclick="document.getElementById('rng').value
= parseFloat(document.getElementById('rng').value)
+ parseFloat(document.getElementById('rng').step);
document.getElementById('dsp').innerHTML=document.getElementById('rng').value;" >up</span>
/
<span onclick="document.getElementById('rng').value
= parseFloat(document.getElementById('rng').value)
- parseFloat(document.getElementById('rng').step);
document.getElementById('dsp').innerHTML=document.getElementById('rng').value;" >down</span> <span> kannst du ja auch was anders verwenden: divs oder buttons z.B.~Arano
Vielen Dank erstmal. Mein Problem ist dann nur noch, dass ich von diesen Slidern über 120 Stück habe und für jeden einzelnen Slider eine ID eintragen muss, richtig?
Ja, natürlich !
Du willst ja nicht die Werte irgend eines Inputs haben sondern ganz gezielt, also müssen die Elemente eindeutig identifizierbar sein.
Ließe sich vielleicht auch dynamisch per Javascript erledigen: In einer Schleife alle input[type=range] durchlaufen, ihnen eine ID anfügen (id1, id2,id3,...) und hinter ihnen neue Elemente (Anzeige und Button) ins DOM einfügen die über die generierten IDs auf die Daten der ursprünglichen Inputs referenzieren...
...120 Ergänzungen sind da vermutlich schneller gemacht.
( und mit einer andern Script / Programmiersprache kann das auch ein einfaches Suchen&Ersetzen sein )
~Arano
Du willst ja nicht die Werte irgend eines Inputs haben sondern ganz gezielt, also müssen die Elemente eindeutig identifizierbar sein.
Ließe sich vielleicht auch dynamisch per Javascript erledigen: In einer Schleife alle input[type=range] durchlaufen, ihnen eine ID anfügen (id1, id2,id3,...) und hinter ihnen neue Elemente (Anzeige und Button) ins DOM einfügen die über die generierten IDs auf die Daten der ursprünglichen Inputs referenzieren...
...120 Ergänzungen sind da vermutlich schneller gemacht.
( und mit einer andern Script / Programmiersprache kann das auch ein einfaches Suchen&Ersetzen sein )
~Arano
