javascript - JQuery UI: Multiple sliders with different css for handles -

i have twelve sliders on single page , wish address handles individually use different colors. i'm using .each build sliders.

    //jquery sliders     $(function() {     $("#eq > span").each(function() {       $( ).empty().slider({         orientation: "horizontal",         animate: true,         value: 10,         min: 0,         max: 10,         step: 1,         slide: function( event, ui ) {           var val = $(this).attr('id');           weights[val] = ui.value;           updatesvg();           if (typeof areaselected !== 'undefined') {showpiechart(areaselected); }           }         });       });      }); 

in html looks this. each span has id:

 <div id="eq">      <span id="sl11"></span>  </div> 

however, don't think can use id change colors of slider itself. have found solutions ( http://jqueryui.com/demos/slider/#colorpicker) each slider build individually , colors adjusted, not when sliders build .each.

thanks in advance!

the way see have plenty of options:

1) randomize color inside each loop:

$(function() {        $("#eq > span").each(function() {          $(this).slider({            orientation: "horizontal",            animate: true,            value: 10,            min: 0,            max: 10,            step: 1          });            //randomize color          var randred = math.floor(math.random() * 255);          var randgreen = math.floor(math.random() * 255);          var randblue = math.floor(math.random() * 255);          $(this).css({            "background": "rgb(" + randred + "," + randgreen + "," + randblue + ")"          });        });      });

#eq > span {    float: left;    clear: left;    width: 300px;    margin: 15px;  }

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">  <script src="//code.jquery.com/jquery-1.10.2.js"></script>  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>  <div id="eq"> <span id="sl1"></span>    <span id="sl2"></span>    <span id="sl3"></span>    </div>

2) access sliders using index inside #eq box:

$(function() {        $("#eq > span").each(function() {          $(this).slider({            orientation: "horizontal",            animate: true,            value: 10,            min: 0,            max: 10,            step: 1          });        });          $("#eq > span").eq(0).css({          "background": "red"        });        $("#eq > span").eq(1).css({          "background": "green"        });        $("#eq > span").eq(2).css({          "background": "blue"        });      });

#eq > span {    float: left;    clear: left;    width: 300px;    margin: 15px;  }

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">  <script src="//code.jquery.com/jquery-1.10.2.js"></script>  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>  <div id="eq"> <span id="sl1"></span>    <span id="sl2"></span>    <span id="sl3"></span>    </div>

3) use id directly:

    $(function() {        $("#eq > span").each(function() {          $(this).slider({            orientation: "horizontal",            animate: true,            value: 10,            min: 0,            max: 10,            step: 1          });        });          $("#sl1").css({          "background": "red"        });        $("#sl2").css({          "background": "green"        });        $("#sl3").css({          "background": "blue"        });      });

#eq > span {    float: left;    clear: left;    width: 300px;    margin: 15px;  }

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">  <script src="//code.jquery.com/jquery-1.10.2.js"></script>  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>  <div id="eq"> <span id="sl1"></span>    <span id="sl2"></span>    <span id="sl3"></span>    </div>

4) hardcode styles in css using id:

    $(function () {          $("#eq > span").each(function () {              $(this).slider({                  orientation: "horizontal",                  animate: true,                  value: 10,                  min: 0,                  max: 10,                  step: 1              });          });      });

#eq > span {      float: left;      clear: left;      width: 300px;      margin: 15px;  }  #sl1{      background:purple;  }  #sl2{      background:lime;  }  #sl3{      background:orange;  }

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">  <script src="//code.jquery.com/jquery-1.10.2.js"></script>  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>  <div id="eq"> <span id="sl1"></span>   <span id="sl2"></span>   <span id="sl3"></span>    </div>

5) use nth-child() selector access thm index form css

    $(function() {        $("#eq > span").each(function() {          $(this).slider({            orientation: "horizontal",            animate: true,            value: 10,            min: 0,            max: 10,            step: 1          });        });      });

#eq > span {    float: left;    clear: left;    width: 300px;    margin: 15px;  }  #eq > span:nth-child(1) {    background: black;  }  #eq > span:nth-child(2) {    background: yellow;  }  #eq > span:nth-child(3) {    background: brown;  }

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">  <script src="//code.jquery.com/jquery-1.10.2.js"></script>  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>  <div id="eq"> <span id="sl1"></span>    <span id="sl2"></span>    <span id="sl3"></span>    </div>

and list goes on , on , on...