user interface - How to add multiple Jquery UI sliders on a page -

user interface - How to add multiple Jquery UI sliders on a page -

kindly check illustration of jquery ui slider. using 3 sliders on single page. when scroll slider other sliders move. drag 1 scroll other 2 scroll remain on same place inner content scroll. there alot of code in example. how can utilize 3 sliders minimal redundant code. kindly see illustration below , click view source link on page.

http://jqueryui.com/slider/#side-scroll

sample code

$(function() { //scrollpane parts var scrollpane = $( ".scroll-pane" ), scrollcontent = $( ".scroll-content" ); //build slider var scrollbar = $( ".scroll-bar" ).slider({ slide: function( event, ui ) { if ( scrollcontent.width() > scrollpane.width() ) { scrollcontent.css( "margin-left", math.round( ui.value / 100 * ( scrollpane.width() - scrollcontent.width() ) ) + "px" ); } else { scrollcontent.css( "margin-left", 0 ); } } }); //append icon handle var handlehelper = scrollbar.find( ".ui-slider-handle" ) .mousedown(function() { scrollbar.width( handlehelper.width() ); }) .mouseup(function() { scrollbar.width( "100%" ); }) .append( "<span class='ui-icon ui-icon-grip-dotted-vertical'></span>" ) .wrap( "<div class='ui-handle-helper-parent'></div>" ).parent(); //change overflow hidden slider handles scrolling scrollpane.css( "overflow", "hidden" ); //size scrollbar , handle proportionally scroll distance function sizescrollbar() { var remainder = scrollcontent.width() - scrollpane.width(); var proportion = remainder / scrollcontent.width(); var handlesize = scrollpane.width() - ( proportion * scrollpane.width() ); scrollbar.find( ".ui-slider-handle" ).css({ width: handlesize, "margin-left": -handlesize / 2 }); handlehelper.width( "" ).width( scrollbar.width() - handlesize ); } //reset slider value based on scroll content position function resetvalue() { var remainder = scrollpane.width() - scrollcontent.width(); var leftval = scrollcontent.css( "margin-left" ) === "auto" ? 0 : parseint( scrollcontent.css( "margin-left" ) ); var percentage = math.round( leftval / remainder * 100 ); scrollbar.slider( "value", percentage ); } //if slider 100% , window gets larger, reveal content function reflowcontent() { var showing = scrollcontent.width() + parseint( scrollcontent.css( "margin-left" ), 10 ); var gap = scrollpane.width() - showing; if ( gap > 0 ) { scrollcontent.css( "margin-left", parseint( scrollcontent.css( "margin-left" ), 10 ) + gap ); } } //change handle position on window resize $( window ).resize(function() { resetvalue(); sizescrollbar(); reflowcontent(); }); //init scrollbar size settimeout( sizescrollbar, 10 );//safari wants timeout });

ok figured out!!.. @mark talking bro. first take every thing in own function. in document .ready phone call against unique class this

$(document).ready(function(){ slidermos(".slider1"); slidermos(".slider2"); slidermos(".slider3"); });

here rest of function. phone call out document .ready. thats it

function slidermos ( sliders ) { //scrollpane parts var scrollpane = $(sliders+" .scroll-pane" ), scrollcontent = $(sliders+" .scroll-content" ); //scrollpane.hide() //build slider var scrollbar = $(sliders+" .scroll-bar" ).slider({ slide: function( event, ui ) { if ( scrollcontent.width() > scrollpane.width() ) { scrollcontent.css( "margin-left", math.round( ui.value / 100 * ( scrollpane.width() - scrollcontent.width() ) ) + "px" ); } else { scrollcontent.css( "margin-left", 0 ); } } }); //append icon handle var handlehelper = scrollbar.find( ".ui-slider-handle" ) .mousedown(function() { scrollbar.width( handlehelper.width() ); }) .mouseup(function() { scrollbar.width( "100%" ); }) .append( "<span class='ui-icon ui-icon-grip-dotted-vertical'></span>" ) .wrap( "<div class='ui-handle-helper-parent'></div>" ).parent(); //change overflow hidden slider handles scrolling scrollpane.css( "overflow", "hidden" ); //size scrollbar , handle proportionally scroll distance function sizescrollbar() { var remainder = scrollcontent.width() - scrollpane.width(); var proportion = remainder / scrollcontent.width(); var handlesize = scrollpane.width() - ( proportion * scrollpane.width() ); scrollbar.find( ".ui-slider-handle" ).css({ width: handlesize, "margin-left": -handlesize / 2 }); handlehelper.width( "" ).width( scrollbar.width() - handlesize ); } //reset slider value based on scroll content position function resetvalue() { var remainder = scrollpane.width() - scrollcontent.width(); var leftval = scrollcontent.css( "margin-left" ) === "auto" ? 0 : parseint( scrollcontent.css( "margin-left" ) ); var percentage = math.round( leftval / remainder * 100 ); scrollbar.slider( "value", percentage ); } //if slider 100% , window gets larger, reveal content function reflowcontent() { var showing = scrollcontent.width() + parseint( scrollcontent.css( "margin-left" ), 10 ); var gap = scrollpane.width() - showing; if ( gap > 0 ) { scrollcontent.css( "margin-left", parseint( scrollcontent.css( "margin-left" ), 10 ) + gap ); } } $(sliders+" .ui-slider-handle ").append("<span class='dragstyle'>drag</span>") //change handle position on window resize $( window ).resize(function() { resetvalue(); sizescrollbar(); reflowcontent(); }); //init scrollbar size settimeout( sizescrollbar, 10 );//safari wants timeout }

jquery user-interface