Подскажите пожалуйста как сделать что-бы инпут взаимодействовал со звездами, то-есть если в инпут написали 4 то и окрашенных звезд 4. Сейчас звезды меняются если в value через html задать цифру. Спасибо
$(document).ready(function () {
$('.rating__body.edit .rating__star').hover(function () {
var block = $(this).parents('.rating');
block.find('.rating__activeline').css({ width: '0%' });
var ind = $(this).index() + 1;
var linew = ind / block.find('.rating__star').length * 100;
setrating(block, linew);
}, function () {
var block = $(this).parents('.rating__body');
block.find('.rating__star').removeClass('active');
var ind = block.find('input').val();
var linew = ind / block.find('.rating__star').length * 100;
setrating(block, linew);
});
$('.rating__body.edit .rating__star').click(function (event) {
var block = $(this).parents('.rating__body');
var re = $(this).index() + 1;
block.find('input').val(re);
var linew = re / block.find('.rating__star').length * 100;
setrating(block, linew);
});
$.each($('.rating__body'), function (index, val) {
var ind = $(this).find('input').val();
var linew = ind / $(this).parent().find('.rating__star').length * 100;
setrating($(this), linew);
});
function setrating(th, val) {
th.find('.rating__activeline').css({ width: val + '%' });
}
});
.rating {
display: flex;
flex-wrap: wrap;
}
.rating__body{
display: inline-block;
position: relative;
width: 101px;
}
.rating__line{
position: absolute;
width: 101px;
height: 16px;
top: 0;
left: 0;
background: url("https://i.ibb.co/RYvRDph/bg-rating.png") 0 0 no-repeat;
z-index: 1;
background-size: 100% 100%;
}
.rating__activeline {
position: absolute;
width: 0px;
height: 16px;
top: 0;
left: 0;
background: url("https://i.ibb.co/QbhcQwD/bg-rating-active.png") 0 0 no-repeat;
z-index: 2;
background-size: 100% 100%;
}
.rating__star{
width: 16px;
height: 16px;
display: inline-block;
position: relative;
z-index: 3;
}
.rating__value{
font-weight: 600;
font-size: 18px;
}
<div class="rating">
<div class="rating__body">
<div class="rating__line"></div>
<div class="rating__activeline"></div>
<div class="rating__stars">
<span class="rating__star"></span>
<span class="rating__star"></span>
<span class="rating__star"></span>
<span class="rating__star"></span>
<span class="rating__star"></span>
</div>
<input data-required value="5.0" autocomplete="off" type="text" name="rating" class="input">
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>