Изменение рейтинга звезд с помощью слайдера пользовательского интерфейса jQuery с Fontawesome

Question

Я хочу изменить элементы звезды в правом верхнем углу при изменении значения ползунка. Например, когда значение ползунка равно 1, должна быть 1 звезда, для значения 2 должна быть 2 звезды и т. Д., Вплоть до 5 звезд, сохраняющих ту же структуру HTML если возможно. Я держал slide: function() {} пусто, потому что я не знаю, как сделать функцию при изменении значения.

$(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');
        }
    }
  });
});