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.
Auf Facebook teilen
Auf Twitter teilen
Auf Reddit teilen
Auf Linkedin teilenBitte markiere auch die Kommentare, die zur Lösung des Beitrags beigetragen haben
Content-ID: 321283
Url: https://administrator.de/contentid/321283
Ausgedruckt am: 25.11.2024 um 09:11 Uhr
3 Kommentare
Neuester Kommentar
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
