So ändern Sie HTML-range-Schieberegler eingestellten Wert mit Taste?

Ich bin mit einer HTML-Auswahl-slider zum vergrößern und verkleinern eines Bildes. Ich möchte auch zeigen, zwei Tasten mit slider wie + für zoom-und − für verkleinern. Klickt ein Benutzer auf einen dieser buttons, der slider verschoben werden sollen. Aber ich bin nicht in der Lage, dies zu tun. Hier ist mein code.

<div id="slider">
    <input id="slide" type="range" min="330" max="1200" step="30" value="330" onchange="ImageViewer.sliderAction(this.value)" />
</div>

Hier ist meine Funktion:

var sliderAction = function (value) {
    $sliderChosen.html(value);
    $("#img").width(value);
    $("#img").height(value);
};

Wenn ich auf die Schaltfläche klicke, habe ich versucht, dieses:

btnZoomIn.click(function() {
    $("#slide").value();  //Want to change value but value is undefined.
});

Gibt es irgendeine Möglichkeit das zu ändern Schieberegler und verschieben Sie es auch auf den button klicken?

  • .val() den Wert null
  • wie wäre attr('value')?
InformationsquelleAutor umer | 2015-12-16
  1. 8

    verwenden val()

     btnZoomIn.click(function() {
               //if value < max
               $("#slide").val(parseInt($("#slide").val())+30);  
               $("#slide").trigger('change');
            });

    https://jsfiddle.net/9jfst447/

    • Sie sind rechts, aber da ist ein kleiner Fehler. $("#slide").val() keinen integer-Wert zurückgeben. Rückkehr mit doppelten Anführungszeichen wie "450" und nach hinzufügen und 30, es macht 45030 und der regler geht auf max Wert. Ich Tat dies, und es funktioniert jetzt. parseInt($("#slide").val())+30. Es funktioniert jetzt.
    • Es ist auch ohne Feuer change-Ereignis.
    InformationsquelleAutor madalinivascu
  2. 1

    Können Sie callback-Funktion .val() und dann trigger onchange-Ereignis:

    var sliderelement = $( "#slide" );
btnZoomIn.click(function() {
 sliderelement.val(function( index, value ) {
     return parseInt(value,10) + 30;
 });
 sliderelement[0].onchange()
});
    • Der gleiche Fall wie oben. Wert geändert, aber Schieberegler bewegt auf seinen max-Wert
    • können Sie reproduzieren des Problems in Geige und teilen den link?
    • ich habe meine Antwort als ich sagte oben @madalin Antwort.
    • ahh. parsing-Problem. ich dachte .val liefert den Wert im int-format zur Auswahl.
    InformationsquelleAutor Milind Anantwar
Schreibe einen Kommentar