tabler/preview/pages/_includes/ui/rating.html

{% assign id = include.id | default: include.icon | default: 'default' %}
{% assign icon = include.icon | default: 'star' %}
{% assign color = include.color %}
{% assign size = include.size | default: false %}
{% assign value = include.value %}

<select id="rating-{{ id }}">
	<option value="">Select a rating</option>
	<option value="5"{% if value == 5 %} selected{% endif %}>Excellent</option>
	<option value="4"{% if value == 4 %} selected{% endif %}>Very Good</option>
	<option value="3"{% if value == 3 %} selected{% endif %}>Average</option>
	<option value="2"{% if value == 2 %} selected{% endif %}>Poor</option>
	<option value="1"{% if value == 1 %} selected{% endif %}>Terrible</option>
</select>

{% capture star %}
{% include "ui/icon.html" class="gl-star-full" icon=icon color=color type="filled" size=size %}
{% endcapture %}
{% assign star = star | replace_regex: "[\t\s]+\n", "" | strip %}
{% assign star = star | replace_regex: "[\n\t]{2,}", " " | strip %}
{% assign star = star | replace_regex: "<!--[^-]*-->", "" | strip %}

{% capture_global scripts %}
<script>
  // @formatter:off
  {% if environment == 'development' %}window.tabler_rating = window.tabler_rating || {};{% endif %}

  document.addEventListener("DOMContentLoaded", function () {
    const rating = new StarRating('#rating-{{ id }}', {
		tooltip: false,
		clearable: false,
		stars: function (el, item, index) {
			 el.innerHTML = `{{ star }}`; 
		},
		classNames: {
		}
	 })		
    {% if environment == 'development' %}window.tabler_rating["rating-{{ id }}"] = rating;{% endif %}
  })
  // @formatter:on
</script>
{% endcapture_global %}