jQuery Slider - Getting faster

Question

I know how to use the jQuery slider but wondered how I might go about this.

I'd like it so the further right you slide the handle the quicker a divs width increases.

For example. If I slide to step 1 of the slider, the width of the div continuously increases by 5px. If I slide to step 2 of the slider, the width of the div continuously increases by 10px.

Thanks in advance

Edit: so far I have this, but this obviously isn't right. I'm not quite sure where to go from here:

$( ".sliderh" ).slider({
  value:1,
  min: 1,
  max: 200,
  slide: function( event, ui ) {
      horizontalVal = ui.value
    $('.square').css('width', horizontalVal)
  }
});

Answer 1

If you want the value of the slider to increase exponentially, you just have to decide on some exponential format for it. Something like horizontalVal = Math.pow(horizontalVal, 2). If that increases the div too slowly or too quickly, just adjust. You could do horizontalVal = Math.pow(horizontalVal/2, 2) for instance.

edit:

What about something like this:

var increase;
var interval;

$( ".sliderh" ).slider({
  value:1,
  min: 1,
  max: 200,
  slide: function( event, ui ) {
      increase = ui.value;
      }
});

$(".sliderh").mousedown(function(e){
    interval = setInterval(function(){
        $('.square').css('width', $('.square').width() + increase);
    }, 200);
});

$(".sliderh").mouseup(function(e){
    clearInterval(interval);
});

You can tweak the interval length, currently set to 200ms, and the increase size, currently just set to the value of the slider, to change the effect. Right now, it will increase while you hold down the mouse every 200ms by the value of the slider, the further you slide right, the more it increases each interval.