Range slider met step up/down knoppen

[Stanleyvc]

Ik heb een slider gemaakt in een webapplicatie en nu probeer ik met knoppen onder en boven de slider
te maken dat de slider 1 stapje omhoog of 1 stapje naar beneden gaat.

Maar van alles geprobeerd maar krijg het niet werkend.



Ik probeer dus vanuit "onclick" in de button, de "range" slider met 1 te verhogen of met 1 te verlagen.

Eigenlijk zou ik de range slider bediening willen emuleren, dat deze 1 step verplaatst.

iemand tips, alvast bedankt.

[ Voor 17% gewijzigd door Stanleyvc op 12-11-2023 17:46 ]

[TERW_DAN]

Welke functie roep je aan aals je de slider omhoog of omlaag beweegt? Als je diezelfde dan toewijst aan de onclick (met de juiste argumenten) zou dat moeten werken.

Maar zonder enige code voorbeelden is dat gewoon gokken. Post eens wat (relevante) code die laat zien wat die slider doet, en geef eventuele foutmeldingen die je krijgt als je die aanroept.

[Stanleyvc]

Allereerst dank voor je snelle reactie.

Dit is het tekst vakje waarin de waarde word gezet:
<font size="2px" id="sl3" color="Blue"><center>50</center></font>

Dit is het "+" knopje:
<input type="button" class="sl0" name="sl3p" value="+" onclick="document.getElementById('sl3sl').value += 1;">

En dit is de slider:
<input type="range" id="sl3sl" orient="vertical" name="sl3" oninput="document.getElementById('sl3').innerHTML = this.value" value="50" min="0" max="100">

Er gebeurd wel wat, de slider schiet heel ver omhoog en het tekst vakje word ook niet bijgewerkt.

[ Voor 10% gewijzigd door Stanleyvc op 12-11-2023 18:57 ]

[TERW_DAN]

Maar waar zeg je dat het vakje bijgewerkt moet worden? Je verandert de waarde van dat slider element, maar verder doe je niets.
De slider heeft een oninput functie, die heeft het knopje niet. Dus je verandert waarschijnlijk wel een waarde, maar ik zie nergens dat je het textvakje update.

[Stanleyvc]

Het klopt dat het tekst vakje nog niet word aangepast nadat op het knopje is gedrukt.

Het tekst vakje word wel netjes aangepast wanneer ik de slider verschuif.

Ik probeer eerst de slider met 1 stapje doormiddel van het knopje te verschuiven, wat nog niet lukt.

[ Voor 5% gewijzigd door Stanleyvc op 12-11-2023 19:17 ]

[Poehzel]

De reden waarom je slider "heel ver omhoog schiet" is omdat de waarde na je onclick hoger is dan de maximale waarde (100). Als je een waarde die je probeerd te zetten hoger is dan de max, wordt de max gehanteerd.

Maar waarom is deze hoger dan 100? Je doet in dit geval toch 50 + 1?
Daar lijkt het misschien op, maar dat is niet waar. De waarde die je terug krijgt is namelijk een string.
(Zie hier: https://developer.mozilla...Element/input/range#value)

Het volgende gebeurd dus in het geval van jouw onclick

code:

document.getElementById('sl3sl').value += 1;

Is:
"50" += 1;

Resultaat:
"501"

[Stanleyvc]

Ok, Dank je...

Hoe kan ik daar dan een nummertje van maken?

[TERW_DAN]

Stanleyvc schreef op zondag 12 november 2023 @ 19:24:
Ok, Dank je...

Hoe kan ik daar dan een nummertje van maken?

Simpelste manier is parseInt() gebruiken (als je gehele getallen wilt gebruiken).

[Stanleyvc]

Beide heel hartelijk dank voor de hulp.
Het werkt.
Nogmaals dank voor de snelle tips.

[Tsjilp]

Ik zou ook even kijken naar je <font> en <center> tags, die zijn toch al heel wat jaartjes deprecated...

[RobIII]

Voor een volgende keer:

Die vragen die er staan wanneer je een nieuw topic opent staan er niet voor niets:

Mijn vraag
...

Relevante software en hardware die ik gebruik
...

Wat ik al gevonden of geprobeerd heb
...

Doe jezelf, en ons, een lol en neem even onze Quickstart door voor een volgend topic Verder: gebruik voortaan code tags wanneer je code post a.u.b.

Edit: Blijkt dat ik je niet heel lang geleden daar ook al op gewezen heb. Let daar even op a.u.b.

[ Voor 13% gewijzigd door RobIII op 13-11-2023 14:11 ]