CODEWITHSUNDEEP
javascriptjquerycssjquery-ui
LexMulier
LexMulier

Reputation: 273

JQuery UI: Multiple sliders with different css for handles

I have twelve sliders on a single page and I wish to address the handles individually to use all different colors. I'm using .each to build the sliders.

    //jquery sliders
    $(function() {
    $("#eq > span").each(function() {
      $( this ).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 the HTML it looks like this. Each span has an ID:

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

However, I don't think I can use this ID to change the colors of the slider itself. I have found solutions ( http://jqueryui.com/demos/slider/#colorpicker) where each slider is build individually and then the colors are adjusted, but not when the sliders are build with .each.

Thanks in advance!

Upvotes: 1

Views: 312

Answers (1)

Banana
Banana

Reputation: 7483

The way i see it you have plenty of options:

1) randomize the color inside the 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 the sliders using their index inside the #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 their 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 the styles in css using their 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 the nth-child() selector to access thm by their 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 the list goes on and on and on...

Upvotes: 1

Related Questions