Dynamic Slider Control

Greeting to all Experts :
I want to build a slider control based on user input. Let me explain it based on layout HTML :
Basically i want to do create a dynamically slider control based on user input. The layout should be like that :

How many slider you need? Total :>> [User key in value]
Eg:
I key in 3, then, that's will be 3 dynamically slider control + label  will be generate :
             ____________________
Slider 1 |-------------------||--------|      label    //If i drag value 1, i'also need to see the label change to 1 too
             -------------------------------
             ____________________
Slider 2 |-------------------||--------|      label
             --------------------------------
             ____________________
Slider 3 |-------------------||--------|      label
             --------------------------------

Last, i need to see the scale for each slider control too. Like this format :

eg:
             1  2   3    4    5  6   7  8   9
             |    |    |    |    |   |    |   |   |  <-----------value is 1 - 9 only
             ____________________
Slider 1 |-------------------||--------|      label
             --------------------------------

-After user key in all the value, i'll need to able to get the value from each slider value selected by user.
Later, i'll need to retrieve it based on value come from database. But, it's ok for me if my requirement above achieve.

I got some snippet code, can you modify it based on my problems?

slider.html
==========
<script>
var drag=false, obj, base, lbl;
var int=20, head=5, w=1, dif=int-head+w, limit=10; int+=w;
var startnum=1;

function dragit(x){
var fromleft=x-base.offsetLeft-dif, newnum=Math.round(fromleft/int);
if(newnum>limit){newnum=limit;}else if(newnum<1){newnum=1;}
document.forms[0].output.value=newnum-1; newnum=(newnum-1)*int;
obj.style.left=newnum+base.offsetLeft;}

function init(){
obj=document.getElementById('tab');
base=document.getElementById('base');
document.forms[0].output.value=startnum-1;
obj.style.top=base.offsetLeft+10;
obj.style.left=(startnum-1)*int+base.offsetLeft;}
</script>

<body bgcolor=cccccc onload="init();" onmousemove="if(drag){dragit(event.x+document.body.scrollLeft);}" onmouseup="drag=false;">
<form>
<div id=base>
<img src='base.gif'></div>
<div id=tab style="font-size:0;position:absolute;" onmousedown="drag=true;">
<img src='tab.gif' unselectable=on
onmousedown="this.src='tab2.gif';" onmouseup="this.src='tab.gif';">
</div>
<input type=text name=output size="2">
</form>

I'll always Appreciate for any helps.
Your effort will appreciate if any source/references/modification code above to lead me to solve the problems.

Thanks.

Regards
x_com

LVL 29
David H.H.LeeAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

NetGrooveCommented:
How about this:


<html>
<head>
<script>
var sCount = 0;
function incSlidCount(theField){
  theField.value=theField.value.replace(/\D/g,'');
  newCount = theField.value * 1;
  if(newCount>sCount){
    sArea = document.getElementById('sliderFarm');
    for(i=sCount;i<theField.value;i++){
      sArea.innerHTML += newSlider(i+1)
    }
    sCount = newCount;
  }
}
function newSlider(sId){
  sCode = '<table border=0>'
  sCode += '<tr style="font-size:12"><td></td><td>&nbsp;&nbsp;</td>';
  for(var i=1;i<10;i++){
    sCode+='<td><center>'+i+'</center></td>'
  }
  sCode += '<td>&nbsp;&nbsp;</td></tr>'
  sCode += '<tr style="font-size:6"><td></td><td>&nbsp;&nbsp;</td>';
  for(var i=1;i<10;i++){
    sCode+='<td><center>|</center></td>'
  }
  sCode += '<td>&nbsp;&nbsp;</td></tr>'
  sCode += '<tr><td>Slider '+sId+'</td><td colspan="11">';
  sCode += '<span id="S'+sId+'" style="overflow-x:scroll; overflow-y:hidden; width:200; height=15;"';
  sCode += ' onScroll="scrollSlider(this)">';
  for(var i=0;i<600;i++){
    sCode+= "&nbsp;";
  }
  sCode+='</span></td><td>';
  sCode+='<span id="LS'+sId+'">1</span></td></tr></table>';
  return sCode;
}

function scrollSlider(theSpan){
  sId = theSpan.id;
  document.getElementById('L'+sId).innerHTML = Math.round(theSpan.scrollLeft/260)+1;
}

function enter(e){
  keyCode = (e.keyCode)?e.keyCode:e.which;
  if(keyCode==13) {
    e.srcElement.onchange();
    return false;
  }
}
</script>

</head>
<body onLoad="document.forms[0].slidCount.focus()">
<form>
How many slider you need? Total:
<input type=text name="slidCount" size="1" value="0" onChange="incSlidCount(this)" onKeyPress="return enter(event)">
<div id="sliderFarm"></div>
</form>
</body>
</html>



NetGrooveCommented:
Here a small improvement:


<html>
<head>
<script>
var sCount = 0;
function incSlidCount(theField){
  theField.value=theField.value.replace(/\D/g,'');
  newCount = theField.value * 1;
  if(newCount>sCount){
    sArea = document.getElementById('sliderFarm');
    for(i=sCount;i<theField.value;i++){
      sArea.innerHTML += newSlider(i+1)
    }
    sCount = newCount;
  }
}
function newSlider(sId){
  sCode = '<table border=0>'
  sCode += '<tr style="font-size:12"><td></td><td>&nbsp;&nbsp;</td>';
  for(var i=1;i<10;i++){
    sCode+='<td><center>'+i+'</center></td>'
  }
  sCode += '<td>&nbsp;&nbsp;</td></tr>'
  sCode += '<tr style="font-size:6"><td></td><td>&nbsp;&nbsp;</td>';
  for(var i=1;i<10;i++){
    sCode+='<td><center>|</center></td>'
  }
  sCode += '<td>&nbsp;&nbsp;</td></tr>'
  sCode += '<tr><td>Slider '+sId+'</td><td colspan="11">';
  sCode += '<span id="S'+sId+'" style="overflow-x:scroll; overflow-y:hidden; width:200; height=15;"';
  sCode += ' onScroll="scrollSlider(this)">';
  for(var i=0;i<600;i++){
    sCode+= "&nbsp;";
  }
  sCode+='</span></td><td>';
  sCode+='<span id="LS'+sId+'">1</span></td></tr></table>';
  return sCode;
}

function scrollSlider(theSpan){
  sId = theSpan.id;
  document.getElementById('L'+sId).innerHTML = Math.round(theSpan.scrollLeft/theSpan.scrollWidth*9)+1;
}

function enter(e){
  keyCode = (e.keyCode)?e.keyCode:e.which;
  if(keyCode==13) {
    e.srcElement.onchange();
    return false;
  }
}
function init(){
  document.forms[0].slidCount.select();
  document.forms[0].slidCount.focus();
}
</script>

</head>
<body onLoad="init()">
<form>
How many slider you need? Total:
<input type=text name="slidCount" size="1" value="0" onChange="incSlidCount(this)" onKeyPress="return enter(event)">
<div id="sliderFarm"></div>
</form>
</body>
</html>



Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
David H.H.LeeAuthor Commented:
NetGroove ,
One word to describe you : AWESOME!!!

Your code is work prefectly as i need! THANKS a millions time!!!!

I really appreciate your help, should be award with bonus points for your great help!

I'm willing to award BONUS points to you at this thread :
http://oldlook.experts-exchange.com/Web/Web_Languages/JavaScript/Q_20804660.html

THANKS!!!

Regards
x_com
NetGrooveCommented:
Thank you!
sowji0909Commented:
how can I get  the slider  values  for further processing
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.