CODEWITHSUNDEEP
javascriptjqueryhtml
Dinesh
Dinesh

Reputation: 855

jQuery: change the value of input range continuously with mousedown event

I am trying to change the value of input range continuously with until mousedown on a button

code i tried
HTML

<input type="range" id="points" value="50" min="10" max="100" step="1" />
<input type="button" id="plus" value="+" />
<input type="button" id="minus" value="-" />

jQuery

$('#plus').on('mousedown', function() {
  oldvalue = parseInt($('#points').val());
  $('#points').val(oldvalue + 5).change();
  console.log($('#points').val());
  });

$('#minus').on('mousedown', function() {
  oldvalue = parseInt($('#points').val());
  $('#points').val(oldvalue -  5).change();
  console.log($('#points').val());
  });

jsfiddle

with this code value of input range is changed only once, but my requirement is keep changing the value untill mousedown

Thanks in advance for help

Upvotes: 1

Views: 1544

Answers (2)

Arun P Johny
Arun P Johny

Reputation: 388316

You need to program the repeated nature, so you can use a setInterval() to do that like

$(document).ready(function() {
  function setRepeatedMouseDown(el, callback) {
    var timer;

    $(el).on('mousedown', function() {
      callback();
      timer = setInterval(callback, 500);
    }).on('mouseleave mouseup', function() {
      clearInterval(timer);
    });

  }

  setRepeatedMouseDown('#plus', function() {
    $('#points').val(function(i, val) {
      return +val + 5;
    }).change();
  });
  setRepeatedMouseDown('#minus', function() {
    $('#points').val(function(i, val) {
      return +val - 5;
    }).change();
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="range" id="points" value="50" min="10" max="100" step="1" />
<input type="button" id="plus" value="+" />
<input type="button" id="minus" value="-" />

Upvotes: 1

Pierpaolo Cira
Pierpaolo Cira

Reputation: 1477

Your problem is that event is triggered just once... what you should do is to be sure that (until event continues) your code is periodically executed. So an idea can be to start a periodic timer on "mousedown" event using setTinterval() function, and stop it on "mouseup" event with a clearInterval(). In my example I decleared an interval "global" variable. I also executed the function just one time before setting the interval, otherwhise on click it doesn't be executed.

Hope it helps.

var interval;

$('#plus').on('mousedown', function() {
    startTime(true); // to work on click also
  interval =  setInterval(function(){startTime(true);}, 500);
});

$('#minus').on('mousedown', function() {
    startTime(false); // to work on click also
  interval =  setInterval(function(){startTime(false);}, 500);
});

$('.rangeMover').on('mouseup', function() {
  clearInterval(interval);
});

function startTime(plus) {
    var oldvalue = parseInt($('#points').val());
    if (plus) {
        $('#points').val(oldvalue + 5).change();
    } else {
        $('#points').val(oldvalue -  5).change();
    }
      console.log($('#points').val());
}

<input type="range" id="points" value="50" min="10" max="100" step="1" />
<input type="button" id="plus" class="rangeMover" value="+" />
<input type="button" id="minus" class="rangeMover" value="-" />

Be aware of HTML modification too.

PS: http://jsfiddle.net/uu9o1vam/ if you prefer.

Upvotes: 0

Related Questions