Open In App

Semantic-UI Rating Type Star

Improve
Improve
Like Article
Like
Save
Share
Report

Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing.

Semantic UI offers a Rating component for users to convey their interests on a certain topic from 1 to generally 5. It is used to show the preference level of the user regarding some content. There are different representations of Rating.  One of them is star type.

Users can take feedback in the form of star ratings. Users can hover over the stars to express their preferences. Users can even decide the number of stars to be shown to take the user’s interest. It can be done using the “data-max-rating”. It sets the limit of stars to be shown (the upper max limit). You can also add the default rating to be shown when the user first loads up the content. It can be done using the “data-rating”. You can add the star rating type to any content be it below a picture or a text or any particular content where you want to know how much the user liked it. 

Semantic-UI Rating Type Star Class:

  • star: This class is used to set the type of rating star.

Syntax:

<div class="ui star rating"></div>

Below example illustrate the Semantic-UI Rating Type Star:

Example: This example demonstrates the star rating type. We are asking the user to express his interest level by a question. In this example, the data-max-rating is set to 10, and the data-rating is set to 7 as an average. A script is also added in order for the UI to work. You can customize the script as per your requirement.

HTML




<!DOCTYPE html>
<html>
 
<head>
  <link href=
        rel="stylesheet" />
  <script src=
            integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
            crossorigin="anonymous">
    </script>
    <script src=
    </script>
</head>
 
<body>
  <div class="ui container">
    <h2 style="color:green">GeeksforGeeks</h2>
    <b>
       
<p>Semantic UI star rating type.</p>
 
    </b>
    <br />
     
<p>
      On a rate of 1-10 how much would you
      recommend GFG to your colleague ?
    </p>
 
 
    <br />
    <div class="ui star rating"
         data-rating="7"
         data-max-rating="10"></div>
    <script>
      $('.rating').rating();
    </script>
  </div>
</body>
 
</html>


 

 

Output: You can see the working of the code above in the form of a GIF below. The user is interacting with the star rating type and how the UI is responding to the user’s hovering over it. The user is hovering over the stars and changing the value from 7 to 10.

 

Semantic-UI Rating Type Star

Semantic-UI Rating Type Star 

 

Reference: https://semantic-ui.com/modules/rating.html#star

 



Last Updated : 24 Feb, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads