使用带有 Fontawesome 的 jQuery UI 滑块更改星级

Question

我想在滑块值更改时更改右上角的星项目，例如当滑块值为 1 时应该有 1 星，对于值 2 应该有 2 星等等，直到 5 星保持如果可能，相同的 html 结构。我保留了slide: function() {}empty，因为当值发生变化时我不知道如何制作函数。

$(document).ready(function() {
  $('.slider-rating').slider({
    range: true,
    min: 1,
    max: 5,
    values: [3, 5],
    slide: function() {

    }
  });
});

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
@import
url('https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css');
@import 
url('https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.css');

.control-group {
	margin-bottom: 10px;
  padding: 50px 20px;
}

.control-group .controls {
	margin: 5px 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

<div class="control-group">
  <div class="control-top clearfix">
    <div class="control-title pull-left">Ratings</div>
    <div class="control-percentage pull-right">
      <span class="slider-rating-label">
        <i class="fa fa-star"></i>
        <i class="fa fa-star"></i>
        <i class="fa fa-star"></i>
      </span>
    </div>
  </div>
  <div class="controls">
    <div class="slider slider-rating"></div>
  </div>
</div>

Answer 1

加了两颗星，然后我这样做了：

$(document).ready(function() {
  $('.slider-rating').slider({
    range: true,
    min: 1,
    max: 5,
    values: [3, 5],
    slide: function(x,y) {
        var stars = $('.slider-rating-label').find('i');
        //clear all
        $.each(stars, function (index, value) {
            $(value).removeClass().addClass('fa fa-star-o');
        });
        //fill by slider value
        for (var i = 0; i < y.value; i++) {
            $(stars[i]).removeClass().addClass('fa fa-star');
        }
    }
  });
});