jQueryUI Triangle Slider

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://rawgit.com/krazyjakee/jqueryui-triangle/master/jqueryui-triangle.css">
<script src="https://rawgit.com/krazyjakee/jqueryui-triangle/master/jqueryui-triangle.js"></script>
<div class="container">
  <div class="row">
    <div class="col-sm-4">
      <div id="triangle"></div>
    </div>
    <div class="col-sm-8" id="triangleSliders">
      <br />
      <br />
      <br />
      <div class="progress">
        <div class="progress-bar progress-bar-danger" style="width:50%;">
          <span>50%</span>
        </div>
      </div>
      <div class="progress">
        <div class="progress-bar progress-bar-info" style="width:50%;">
          <span>50%</span>
        </div>
      </div>
      <div class="progress">
        <div class="progress-bar progress-bar-success" style="width:50%;">
          <span>50%</span>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-4">
      <div id="triangle2"></div>
    </div>
    <div class="col-sm-8" id="triangleSliders2">
      <br />
      <br />
      <br />
      <div class="progress">
        <div class="progress-bar progress-bar-danger" style="width:50%;">
          <span>50%</span>
        </div>
      </div>
      <div class="progress">
        <div class="progress-bar progress-bar-info" style="width:50%;">
          <span>50%</span>
        </div>
      </div>
      <div class="progress">
        <div class="progress-bar progress-bar-success" style="width:50%;">
          <span>50%</span>
        </div>
      </div>
    </div>
  </div>
</div>

JavaScript

var setSliders = function(id, values) {
  var elems = $('#' + id).find('.progress');
  for (var i = 0; i <= values.corners.length - 1; i++) {
    value = values.corners[i] + '%';
    $(elems[i]).find('.progress-bar').css('width', value).find('span').html(value);
  }
}

$('#triangle').triangle({
  colors: true,
  callback: function(values) {
    setSliders('triangleSliders', values);
  }
});
$('#triangle2').triangle({
  callback: function(values) {
    setSliders('triangleSliders2', values);
  }
});