Bar Rating / Star Rating Widget


                        
        
            Survey.StylesManager.applyTheme("defaultV2");
        



                
                    var json = {
  "elements": [
    {
      "type": "barrating",
      "name": "movie-rating",
      "ratingTheme": "fontawesome-stars",
      "title": "Please rate the movie you've just watched",
      "choicesMax": 5,
      "choicesMin": 1,
      "choicesStep": 1,
      // "choices": [ 1, 2, 3, 4, 5 ]
    }
  ],
  "showQuestionNumbers": false
};

                    window.survey = new Survey.Model(json);
                
        
            survey.onComplete.add(function(sender) {
            document.querySelector('#surveyResult').textContent =
            "Result JSON:\n" + JSON.stringify(sender.data, null, 3);
            });
        
        
            var app = new Vue({
            el: '#surveyElement',
            data:
            {
            survey: survey
            }
            });
        

                    
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Add a Free Rating Widget to your Vuejs app | JS libraries</title>
    
<meta name="viewport" content="width=device-width" />
    <script src="https://unpkg.com/jquery"></script>
    <script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
    <script src="/DevBuilds/survey-core/survey.core.min.js"></script>
    <script src="/DevBuilds/survey-core/survey.i18n.min.js"></script>
    <script src="/DevBuilds/survey-vue-ui/survey-vue-ui.min.js"></script>
    <link href="/DevBuilds/survey-core/defaultV2.min.css" type="text/css" rel="stylesheet" />
    <link rel="stylesheet" href="./index.css">
<script src="https://unpkg.com/jquery-bar-rating"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css">
<!-- Themes -->
<link rel="stylesheet" href="https://unpkg.com/jquery-bar-rating@1.2.2/dist/themes/bars-1to10.css">
<link rel="stylesheet" href="https://unpkg.com/jquery-bar-rating@1.2.2/dist/themes/bars-movie.css">
<link rel="stylesheet" href="https://unpkg.com/jquery-bar-rating@1.2.2/dist/themes/bars-pill.css">
<link rel="stylesheet" href="https://unpkg.com/jquery-bar-rating@1.2.2/dist/themes/bars-reversed.css">
<link rel="stylesheet" href="https://unpkg.com/jquery-bar-rating@1.2.2/dist/themes/bars-horizontal.css">
<link rel="stylesheet" href="https://unpkg.com/jquery-bar-rating@1.2.2/dist/themes/fontawesome-stars.css">
<link rel="stylesheet" href="https://unpkg.com/jquery-bar-rating@1.2.2/dist/themes/css-stars.css">
<link rel="stylesheet" href="https://unpkg.com/jquery-bar-rating@1.2.2/dist/themes/fontawesome-stars-o.css">
    <script src="/DevBuilds/surveyjs-widgets/surveyjs-widgets.min.js"></script>

</head>
<body style="margin: 0">
    
            <div id="surveyElement" style="display:inline-block;width:100%;">
                                    <survey :survey='survey' />
            </div>
    <div id="surveyResult"></div>

<script type="text/javascript" src="./index.js"></script>

</body>
</html>
Loading...
Sorry, we can't retrieve the data from server. Please comeback later.

A bar rating widget allows you to display choices in a choice-based question as bars, stars, pills, and other symbols. For example, you can use the rating widget on a website to introduce a star review system for customer service or to collect product feedback from users. This demo shows how to add a bar, star, or pill rating question to your survey or poll.

Reference Sources

SurveyJS uses a third-party jQuery Bar Rating plugin as a bar rating widget. Reference the plugin's script and style sheet on your page. You should also reference a script that integrates the SurveyJS Form Library with third-party libraries (surveyjs-widgets.js). Open the HTML tab and copy the links from there.

Create a Bar Rating Question

To create a bar rating question, define an object with the type property set to "barrating" and add it to the elements array. Your bar rating also needs a rating scale. To specify it, assign an array of numbers to the choices property. Alternatively, you can generate scale values based upon the minimum, maximum, and step values. Set the choicesMin, choicesMax, and choicesStep properties as shown under the JavaScript tab.

Change Skins

Skins define symbols (bars, stars, pills) that designate rate values. Each skin is distributed as an individual style sheet that you should reference on your page. You can find style sheet links under the HTML tab. Set the ratingTheme property to apply a skin. In this demo, you can select different skins from the "Themes" drop-down menu and apply them at runtime.

Display Rate Values

You may wish to display rate values to identify a vote clearly. To do this, enable the showValues property. Click the "Show rate values" checkbox to show or hide rate values in this demo.

Use the Built-In Rating Question

If you do not need to display the rating widget in different skins, use the built-in Rating question type. It implements the same functionality but does not require any third-party libraries. Refer to the Rating demo for more information.

Settings

Theme:

Third-party libraries: jQuery Bar Rating ( MIT-licensed )

Why we use cookies.

This site uses cookies to make your browsing experience more convenient and personal. Cookies store useful information on your computer to help us improve the efficiency and relevance of our site for you. In some cases, they are essential to making the site work properly. By accessing this site, you consent to the use of cookies.

For more information, refer to DevSoft Baltic’ privacy policy and cookie policy.