function drawSliders() {
 if (document.getElementById("slider3")) {  //test that slider divs are enabled. After a searhc they are hidden, so we only want to drw them when the search control is visible..
//default slider settings:
var handle1='green_z.png';
var handle2='green_z.png';
var bgimage='bar.gif';
var min;
var max;

// dualsliders

 var slider1 = new Bs_Slider();  // job growth rate
  min=-80;
  max=1330;
  slider1.setBackgroundImage(bgimage, 'no-repeat');
  slider1.attachOnChange(slider1Change);	
  slider1.fieldName     = 'slider1_start';
  slider1.minVal        = min;
  slider1.maxVal        = max;
  slider1.valueInterval = 1;
  slider1.valueDefault  = min;
  slider1.setSliderIcon('green_z.png', 14, 19);
  slider1.useInputField = 0;
  slider1.styleValueFieldClass = 'sliderInput';
  slider1.colorbar = new Object({ color:'#A0D354', height:4, widthDifference:0, offsetLeft:2, offsetTop:9 });
  slider1.useSecondKnob  = true;
  slider1.preventValueCrossing = true;
  slider1.wheelAmount    = 0; //disable mouse wheeling cause we have 2 knobs.
  slider1.fieldName2     = 'slider1_end';
  slider1.minVal2        = min;
  slider1.maxVal2        = max;
  slider1.valueInterval2 = 1;
  slider1.valueDefault2  = max;
  slider1.setSliderIcon2('green_z.png', 14, 19);
  slider1.useInputField2 = 0;
  slider1.styleValueFieldClass2 = 'sliderInput';
  //KK offset left will start the color to the left or right of slider. offsetTop moves the cololr up and down in the div.  Set this to match wherever the slider bar image is.
  // seems to work best when the opffset is one half the width of the "Z" slider handle image.
  slider1.colorbar2 = new Object({ color:'#A0D354', height:4, widthDifference:0, offsetLeft:1, offsetTop:9 });
//  slider1.drawInto('slider1');


 var  slider2 = new Bs_Slider();    //unemployment rate
  min=0;
  max=70;
  slider2.setBackgroundImage(bgimage, 'no-repeat');
  slider2.attachOnChange(slider2Change);	
  slider2.fieldName     = 'slider1_start';
  slider2.minVal        = min;
  slider2.maxVal        = max;
  slider2.valueInterval = 1;
  slider2.valueDefault  = min;
  slider2.setSliderIcon(handle1, 14, 19);
  slider2.useInputField = 0;
  slider2.styleValueFieldClass = 'sliderInput';
  slider2.colorbar = new Object({ color:'#A0D354', height:4, widthDifference:0, offsetLeft:2, offsetTop:9 });
  slider2.useSecondKnob  = true;
  slider2.preventValueCrossing = true;
  slider2.wheelAmount    = 0; //disable mouse wheeling cause we have 2 knobs.
  slider2.fieldName2     = 'slider1_end';
  slider2.minVal2        = min;
  slider2.maxVal2        = max;
  slider2.valueInterval2 = 1;
  slider2.valueDefault2  = max;
  slider2.setSliderIcon2(handle2, 14, 19);
  slider2.useInputField2 = 0;
  slider2.styleValueFieldClass2 = 'sliderInput';
  //KK offset left will start the color to the left or right of slider. offsetTop moves the cololr up and down in the div.  Set this to match wherever the slider bar image is.
  // seems to work best when the opffset is one hapo the width of the "Z" slider handle image.
  slider2.colorbar2 = new Object({ color:'#A0D354', height:4, widthDifference:0, offsetLeft:1, offsetTop:9 });
//  slider2.drawInto('slider2');




  var slider3 = new Bs_Slider();    //bachelors degree
  var min=0;
  var max=96;
  slider3.setBackgroundImage(bgimage, 'no-repeat');
  slider3.attachOnChange(slider3Change);	
  slider3.fieldName     = 'slider1_start';
  slider3.minVal        = min;
  slider3.maxVal        = max;
  slider3.valueInterval = 1;
  slider3.valueDefault  = min;
  slider3.setSliderIcon(handle1, 14, 19);
  slider3.useInputField = 0;
  slider3.styleValueFieldClass = 'sliderInput';
  slider3.colorbar = new Object({ color:'#A0D354', height:4, widthDifference:0, offsetLeft:2, offsetTop:9 });
  slider3.useSecondKnob  = true;
  slider3.preventValueCrossing = true;
  slider3.wheelAmount    = 0; //disable mouse wheeling cause we have 2 knobs.
  slider3.fieldName2     = 'slider1_end';
  slider3.minVal2        = min;
  slider3.maxVal2        = max;
  slider3.valueInterval2 = 1;
  slider3.valueDefault2  = max;
  slider3.setSliderIcon2(handle2, 14, 19);
  slider3.useInputField2 = 0;
  slider3.styleValueFieldClass2 = 'sliderInput';
  //KK offset left will start the color to the left or right of slider. offsetTop moves the cololr up and down in the div.  Set this to match wherever the slider bar image is.
  // seems to work best when the opffset is one hapo the width of the "Z" slider handle image.
  slider3.colorbar2 = new Object({ color:'#A0D354', height:4, widthDifference:0, offsetLeft:1, offsetTop:9 });
  slider3.drawInto('slider3');


  var slider4 = new Bs_Slider();    //high school or higher 
  var min=0;
  var max=100;
  slider4.setBackgroundImage(bgimage, 'no-repeat');
  slider4.attachOnChange(slider4Change);	
  slider4.fieldName     = 'slider1_start';
  slider4.minVal        = min;
  slider4.maxVal        = max;
  slider4.valueInterval = 1;
  slider4.valueDefault  = min;
  slider4.setSliderIcon(handle1, 14, 19);
  slider4.useInputField = 0;
  slider4.styleValueFieldClass = 'sliderInput';
  slider4.colorbar = new Object({ color:'#A0D354', height:4, widthDifference:0, offsetLeft:2, offsetTop:9 });
  slider4.useSecondKnob  = true;
  slider4.preventValueCrossing = true;
  slider4.wheelAmount    = 0; //disable mouse wheeling cause we have 2 knobs.
  slider4.fieldName2     = 'slider1_end';
  slider4.minVal2        = min;
  slider4.maxVal2        = max;
  slider4.valueInterval2 = 1;
  slider4.valueDefault2  = max;
  slider4.setSliderIcon2(handle2, 14, 19);
  slider4.useInputField2 = 0;
  slider4.styleValueFieldClass2 = 'sliderInput';
  //KK offset left will start the color to the left or right of slider. offsetTop moves the cololr up and down in the div.  Set this to match wherever the slider bar image is.
  // seems to work best when the opffset is one hapo the width of the "Z" slider handle image.
  slider4.colorbar2 = new Object({ color:'#A0D354', height:4, widthDifference:0, offsetLeft:1, offsetTop:9 });
  slider4.drawInto('slider4');


  var slider5 = new Bs_Slider();    //wht collar
  var min=0;
  var max=100;
  slider5.setBackgroundImage(bgimage, 'no-repeat');
  slider5.attachOnChange(slider5Change);	
  slider5.fieldName     = 'slider1_start';
  slider5.minVal        = min;
  slider5.maxVal        = max;
  slider5.valueInterval = 1;
  slider5.valueDefault  = min;
  slider5.setSliderIcon(handle1, 14, 19);
  slider5.useInputField = 0;
  slider5.styleValueFieldClass = 'sliderInput';
  slider5.colorbar = new Object({ color:'#A0D354', height:4, widthDifference:0, offsetLeft:2, offsetTop:9 });
  slider5.useSecondKnob  = true;
  slider5.preventValueCrossing = true;
  slider5.wheelAmount    = 0; //disable mouse wheeling cause we have 2 knobs.
  slider5.fieldName2     = 'slider1_end';
  slider5.minVal2        = min;
  slider5.maxVal2        = max;
  slider5.valueInterval2 = 1;
  slider5.valueDefault2  = max;
  slider5.setSliderIcon2(handle2, 14, 19);
  slider5.useInputField2 = 0;
  slider5.styleValueFieldClass2 = 'sliderInput';
  //KK offset left will start the color to the left or right of slider. offsetTop moves the cololr up and down in the div.  Set this to match wherever the slider bar image is.
  // seems to work best when the opffset is one hapo the width of the "Z" slider handle image.
  slider5.colorbar2 = new Object({ color:'#A0D354', height:4, widthDifference:0, offsetLeft:1, offsetTop:9 });
  slider5.drawInto('slider5');


var slider6 = new Bs_Slider();    //blue collar
  var min=0;
  var max=100;
  slider6.setBackgroundImage(bgimage, 'no-repeat');
  slider6.attachOnChange(slider6Change);	
  slider6.fieldName     = 'slider1_start';
  slider6.minVal        = min;
  slider6.maxVal        = max;
  slider6.valueInterval = 1;
  slider6.valueDefault  = min;
  slider6.setSliderIcon(handle1, 14, 19);
  slider6.useInputField = 0;
  slider6.styleValueFieldClass = 'sliderInput';
  slider6.colorbar = new Object({ color:'#A0D354', height:4, widthDifference:0, offsetLeft:2, offsetTop:9 });
  slider6.useSecondKnob  = true;
  slider6.preventValueCrossing = true;
  slider6.wheelAmount    = 0; //disable mouse wheeling cause we have 2 knobs.
  slider6.fieldName2     = 'slider1_end';
  slider6.minVal2        = min;
  slider6.maxVal2        = max;
  slider6.valueInterval2 = 1;
  slider6.valueDefault2  = max;
  slider6.setSliderIcon2(handle2, 14, 19);
  slider6.useInputField2 = 0;
  slider6.styleValueFieldClass2 = 'sliderInput';
  //KK offset left will start the color to the left or right of slider. offsetTop moves the cololr up and down in the div.  Set this to match wherever the slider bar image is.
  // seems to work best when the opffset is one hapo the width of the "Z" slider handle image.
  slider6.colorbar2 = new Object({ color:'#A0D354', height:4, widthDifference:0, offsetLeft:1, offsetTop:9 });
  slider6.drawInto('slider6');


  var slider7 = new Bs_Slider();    //YOUNG and educated
  var min=0;
  var max=15;
  slider7.setBackgroundImage(bgimage, 'no-repeat');
  slider7.attachOnChange(slider7Change);	
  slider7.fieldName     = 'slider1_start';
  slider7.minVal        = min;
  slider7.maxVal        = max;
  slider7.valueInterval = 1;
  slider7.valueDefault  = min;
  slider7.setSliderIcon(handle1, 14, 19);
  slider7.useInputField = 0;
  slider7.styleValueFieldClass = 'sliderInput';
  slider7.colorbar = new Object({ color:'#A0D354', height:4, widthDifference:0, offsetLeft:2, offsetTop:9 });
  slider7.useSecondKnob  = true;
  slider7.preventValueCrossing = true;
  slider7.wheelAmount    = 0; //disable mouse wheeling cause we have 2 knobs.
  slider7.fieldName2     = 'slider1_end';
  slider7.minVal2        = min;
  slider7.maxVal2        = max;
  slider7.valueInterval2 = 1;
  slider7.valueDefault2  = max;
  slider7.setSliderIcon2(handle2, 14, 19);
  slider7.useInputField2 = 0;
  slider7.styleValueFieldClass2 = 'sliderInput';
  //KK offset left will start the color to the left or right of slider. offsetTop moves the cololr up and down in the div.  Set this to match wherever the slider bar image is.
  // seems to work best when the opffset is one hapo the width of the "Z" slider handle image.
  slider7.colorbar2 = new Object({ color:'#A0D354', height:4, widthDifference:0, offsetLeft:1, offsetTop:9 });
  slider7.drawInto('slider7');

  var sliderTrav = new Bs_Slider();    //Travel Time
  var min=0;
  var max=97;
  sliderTrav.setBackgroundImage(bgimage, 'no-repeat');
  sliderTrav.attachOnChange(sliderTravChange);	
  sliderTrav.fieldName     = 'slider1_start';
  sliderTrav.minVal        = min;
  sliderTrav.maxVal        = max;
  sliderTrav.valueInterval = 1;
  sliderTrav.valueDefault  = min;
  sliderTrav.setSliderIcon(handle1, 14, 19);
  sliderTrav.useInputField = 0;
  sliderTrav.styleValueFieldClass = 'sliderInput';
  sliderTrav.colorbar = new Object({ color:'#A0D354', height:4, widthDifference:0, offsetLeft:2, offsetTop:9 });
  sliderTrav.useSecondKnob  = true;
  sliderTrav.preventValueCrossing = true;
  sliderTrav.wheelAmount    = 0; //disable mouse wheeling cause we have 2 knobs.
  sliderTrav.fieldName2     = 'slider1_end';
  sliderTrav.minVal2        = min;
  sliderTrav.maxVal2        = max;
  sliderTrav.valueInterval2 = 1;
  sliderTrav.valueDefault2  = max;
  sliderTrav.setSliderIcon2(handle2, 14, 19);
  sliderTrav.useInputField2 = 0;
  sliderTrav.styleValueFieldClass2 = 'sliderInput';
  //KK offset left will start the color to the left or right of slider. offsetTop moves the cololr up and down in the div.  Set this to match wherever the slider bar image is.
  // seems to work best when the opffset is one hapo the width of the "Z" slider handle image.
  sliderTrav.colorbar2 = new Object({ color:'#A0D354', height:4, widthDifference:0, offsetLeft:1, offsetTop:9 });
  sliderTrav.drawInto('sliderTrav');

  var sliderInt = new Bs_Slider();    // Interstate
  var min=0;
  var max=156;
  sliderInt.setBackgroundImage(bgimage, 'no-repeat');
  sliderInt.attachOnChange(sliderIntChange);	
  sliderInt.fieldName     = 'slider1_start';
  sliderInt.minVal        = min;
  sliderInt.maxVal        = max;
  sliderInt.valueInterval = 1;
  sliderInt.valueDefault  = min;
  sliderInt.setSliderIcon(handle1, 14, 19);
  sliderInt.useInputField = 0;
  sliderInt.styleValueFieldClass = 'sliderInput';
  sliderInt.colorbar = new Object({ color:'#A0D354', height:4, widthDifference:0, offsetLeft:2, offsetTop:9 });
  sliderInt.useSecondKnob  = false;
  sliderInt.preventValueCrossing = false;
  sliderInt.wheelAmount    = 0; //disable mouse wheeling cause we have 2 knobs.
  sliderInt.fieldName2     = 'slider1_end';
  sliderInt.minVal2        = min;
  sliderInt.maxVal2        = max;
  sliderInt.valueInterval2 = 1;
  sliderInt.valueDefault2  = max;
  sliderInt.setSliderIcon2(handle2, 14, 19);
  sliderInt.useInputField2 = 0;
  sliderInt.styleValueFieldClass2 = 'sliderInput';
  //KK offset left will start the color to the left or right of slider. offsetTop moves the cololr up and down in the div.  Set this to match wherever the slider bar image is.
  // seems to work best when the opffset is one hapo the width of the "Z" slider handle image.
  sliderInt.colorbar2 = new Object({ color:'#A0D354', height:4, widthDifference:0, offsetLeft:1, offsetTop:9 });
  sliderInt.drawInto('sliderInt');


  var sliderRail = new Bs_Slider();    //Rail
  var min=0;
  var max=100;
  sliderRail.setBackgroundImage(bgimage, 'no-repeat');
  sliderRail.attachOnChange(sliderRailChange);	
  sliderRail.fieldName     = 'slider1_start';
  sliderRail.minVal        = min;
  sliderRail.maxVal        = max;
  sliderRail.valueInterval = 1;
  sliderRail.valueDefault  = min;
  sliderRail.setSliderIcon(handle1, 14, 19);
  sliderRail.useInputField = 0;
  sliderRail.styleValueFieldClass = 'sliderInput';
  sliderRail.colorbar = new Object({ color:'#A0D354', height:4, widthDifference:0, offsetLeft:2, offsetTop:9 });
  sliderRail.useSecondKnob  = false;
  sliderRail.preventValueCrossing = false;
  sliderRail.wheelAmount    = 0; //disable mouse wheeling cause we have 2 knobs.
  sliderRail.fieldName2     = 'slider1_end';
  sliderRail.minVal2        = min;
  sliderRail.maxVal2        = max;
  sliderRail.valueInterval2 = 1;
  sliderRail.valueDefault2  = max;
  sliderRail.setSliderIcon2(handle2, 14, 19);
  sliderRail.useInputField2 = 0;
  sliderRail.styleValueFieldClass2 = 'sliderInput';
  //KK offset left will start the color to the left or right of slider. offsetTop moves the cololr up and down in the div.  Set this to match wherever the slider bar image is.
  // seems to work best when the opffset is one hapo the width of the "Z" slider handle image.
  sliderRail.colorbar2 = new Object({ color:'#A0D354', height:4, widthDifference:0, offsetLeft:1, offsetTop:9 });
  sliderRail.drawInto('sliderRail');

}
}


function slider1Change(sliderObj, val, newPos, knobNumber) { 
	document.getElementById('CommunitySearch1_job'+knobNumber).value = val;
}

function slider2Change(sliderObj, val, newPos, knobNumber) { 
		document.getElementById('CommunitySearch1_uer'+knobNumber).value = val;
}

function slider3Change(sliderObj, val, newPos, knobNumber) { 
	document.getElementById('CommunitySearch1_bdp'+knobNumber).value = val;
}

function slider4Change(sliderObj, val, newPos, knobNumber) { 
	document.getElementById('CommunitySearch1_hsp'+knobNumber).value = val;
}

function slider5Change(sliderObj, val, newPos, knobNumber) { 
	document.getElementById('CommunitySearch1_wht'+knobNumber).value = val;
}

function slider6Change(sliderObj, val, newPos, knobNumber) { 
	document.getElementById('CommunitySearch1_blu'+knobNumber).value = val;
}

function slider7Change(sliderObj, val, newPos, knobNumber) { 
	document.getElementById('CommunitySearch1_yedu'+knobNumber).value = val;
}


function sliderTravChange(sliderObj, val, newPos, knobNumber) { 
	document.getElementById('CommunitySearch1_trav' + knobNumber).value = val;
}


function sliderIntChange(sliderObj, val, newPos, knobNumber) { 
	document.getElementById('CommunitySearch1_int2').value = val;
}


function sliderRailChange(sliderObj, val, newPos, knobNumber) { 
	document.getElementById('CommunitySearch1_rail2').value = val;
}