<select id="dilEkle" name="dilEkle">
  <option value="tr">Türkçe</option>
  <option value="en">İngilizce</option>
  <option value="fi">Fince</option>
  <option value="es">İspanyolca</option>
</select>


<style>.canli,.soluk,.yarim,.yildiz{margin:5px;margin-top:22px;}.canli{color:#6f42c1;}.soluk{color:#525f7f;}</style>
    
<div class="stat" style="font-size:22px; display: none">
    <span class="fas fa-star canli"></span>
    <span class="fas fa-star canli"></span>
    <span class="fas fa-star canli"></span>
    <span class="fas fa-star yarim" style="display: inline-block;line-height: 1em;background: linear-gradient(to right, #6f42c1 70%, #525f7f 30%);background-clip: text;-webkit-background-clip: text;-webkit-text-fill-color: transparent;"></span>
    <span class="fas fa-star soluk"></span>
</div>

$('[name="dilEkle"]').change(function(){
    $('#dilEkle').after(`<div class="oran"><hr><p>${$("#dilEkle option:selected").text()} seviyenizi seçin:</p><input type="range" value="0" min="1" max="100" oninput="this.nextElementSibling.value = this.value" name="secim"><output>0</output><button name="${this.value}Sec"><i class="fas fa-check-circle"></i> kaydet</button></div>`);
    $(`[name="${this.value}Sec"]`).click(function(){
        console.log($('[name="secim"]').val());
        $('.oran').remove();
        $('.stat').show();
    });
});

jquery ve fontawesome gerektirir. yaptığım yıldız dinamik bir görüntü oluşturuyor. ama bunu yapmak 2dk, css ile uğraşmak 1 saatimi aldı. uğraşamadım dönen yüzdeye göre koşullar yazmaya. koşulları doğru yazarsa yıldızların rengi ona göre değişir. dikkat etmen gereken nokta background da yer alan righ to yüzdesi. canli olan kisim tam puan alan class, yarim olna işte 4.5 puandır, 5. yıldızı etkileyen o yüzdesel backgroundlık kısımdır. soluk kısımsa negatif olan kısım, 2 puan aldıysa diğer 3 yıldız soluk class'lı olmalı. bol şans. normalde pek oturup kod yazmam teorik bilgi veririm sadece.