Multiple jQuery sliders moving each div on same page, any way to simplify code?

I have a page that has multiple sliders (from http://www.switchonthecode.com/tutorials/using-jquery-slider-to-scroll-a-div) and since each of them are different divs I just duplicated the code and changed it to unique classes, which bring this code:

    $(document).ready(function(){
  $(".slider1").slider({
    animate: true,
    handle: ".handle1",
    change: handleSliderChange1,
    slide: handleSliderSlide1
  });

  $(".slider2").slider({
    animate: true,
    handle: ".handle2",
    change: handleSliderChange2,
    slide: handleSliderSlide2
  });

  $(".slider3").slider({
    animate: true,
    handle: ".handle3",
    change: handleSliderChange3,
    slide: handleSliderSlide3
  });

});

function handleSliderChange1(e, ui)
{
  var maxScroll = $(".gal1").attr("scrollWidth") - $(".gal1").width();
  $(".gal1").animate({scrollLeft: ui.value * (maxScroll / 100) }, 1000);
}

function handleSliderSlide1(e, ui)
{
  var maxScroll = $(".gal1").attr("scrollWidth") - $(".gal1").width();
  $(".gal1").attr({scrollLeft: ui.value * (maxScroll / 100) });
}



function handleSliderChange2(e, ui)
{
  var maxScroll = $(".gal2").attr("scrollWidth") - $(".gal2").width();
  $(".gal2").animate({scrollLeft: ui.value * (maxScroll / 100) }, 1000);
}

function handleSliderSlide2(e, ui)
{
  var maxScroll = $(".gal2").attr("scrollWidth") - $(".gal2").width();
  $(".gal2").attr({scrollLeft: ui.value * (maxScroll / 100) });
}


function handleSliderChange3(e, ui)
{
  var maxScroll = $(".gal3").attr("scrollWidth") - $(".gal3").width();
  $(".gal3").animate({scrollLeft: ui.value * (maxScroll / 100) }, 1000);
}

function handleSliderSlide3(e, ui)
{
  var maxScroll = $(".gal3").attr("scrollWidth") - $(".gal3").width();
  $(".gal3").attr({scrollLeft: ui.value * (maxScroll / 100) });
}

While this works just fine too, I have about 7 of these slid开发者_运维百科es (only 3 are shown above) and I feel kinda bad about repeating basically the same code...

could there be a way to simplify this code?

---

You could include it in a function and pass all the necessary variables:

function divSlider(Handle, divId) {

  this.slider({
    animate: true,
    handle: Handle,
    change: handleSliderChange(e, ui, divId);
    slide: handleSliderSlide(e, ui, divId)  });

function handleSliderChange(e, ui, divId)
{
  var maxScroll = divId.attr("scrollWidth") - divId.width();
  divId.animate({scrollLeft: ui.value * (maxScroll / 100) }, 1000);
}

function handleSliderSlide(e, ui, divId)
{
  var maxScroll = divId.attr("scrollWidth") - divId.width();
  divId.attr({scrollLeft: ui.value * (maxScroll / 100) });
}

}

then you could call it by

$('slider1').divSlider('.handle1', $('.gal1'));

Im not a 100% sure if this works.. but I guess it will put you in the right direction

---

It looks like that slider demo is quite old and the slider is one of the jQuery UI widgets. It looks like the side-scroll jQuery UI slider demo most closely matches the demo page linked in your question.

I had a play around to see if I could mimic the old demo page in the jQuery UI and came up with this demo. Not sure if it's what you are after though.