I am using a HTML range slider to zoom in and zoom out an image. I also want to show two buttons with slider like + for zoom and − for zoom out. When a user clicks on either of these buttons, the slider should also be moved. But I am unable to do this. Here is my code.

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

Here is my function:

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

When I click the button, I tried this:

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

Is there any way to change slider value and move it as well on button click?

I am using a HTML range slider to zoom in and zoom out an image. I also want to show two buttons with slider like + for zoom and − for zoom out. When a user clicks on either of these buttons, the slider should also be moved. But I am unable to do this. Here is my code.

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

Here is my function:

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

When I click the button, I tried this:

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

Is there any way to change slider value and move it as well on button click?

• javascript
• jquery
• html
• slider

• .val() value is null – Umer Waheed Commented Dec 16, 2015 at 10:46
• how about attr('value')? – madalinivascu Commented Dec 16, 2015 at 10:49

2 Answers 2

use val()

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

https://jsfiddle/9jfst447/

You can use callback function of .val() and then trigger onchange event:

var sliderelement = $( "#slide" );
btnZoomIn.click(function() {
 sliderelement.val(function( index, value ) {
     return parseInt(value,10) + 30;
 });
 sliderelement[0].onchange()
});