-
Templates
-
Simple Questions
-
Text Entry
-
Date-Time Entry
-
Numeric Entry
-
Color Input
-
Radio Button Group
-
Drop-Down Menu
-
Dropdown: Load Data from Web Services
-
Dropdown with Lazy Loading
-
Multi-Select Dropdown
-
Checkboxes
-
Carry Forward Responses
-
Image Picker
-
Yes/No Question
-
Signature Pad
-
Multiple Text Box
-
Rating
-
Ranking
-
Text Area / Comment
-
Image
-
Html
-
File
-
Expression
-
Expression (using async functions)
-
-
Matrix Table Questions
-
Panel & Dynamic Panel
-
Survey
-
Title and Logo
-
Questions in one line
-
Survey Options
-
Auto-Populate Form Fields
-
Piped Text
-
Edit saved survey
-
Read-only/display mode
-
Show Preview before complete
-
Pop-Up Survey
-
Context actions in element titles
-
Modify title tags
-
Custom render of survey elements
-
File - custom preview
-
File - delayed upload
-
Lazy questions rendering
-
-
Quizzes and Scored Surveys
-
Customize Rendering
-
Integration with Third-Party Libraries
-
Appearance customization
-
Navigation
-
Conditions and Triggers
-
Change Question Visibility
-
Simplify Cascade Conditions
-
Complex Questions in Expressions
-
Custom Functions in Expressions
-
Implement a Custom Expression Property
-
Dynamic Questions with Conditional Logic
-
Hide Question Elements (Rows, Columns, Choices)
-
Show/Hide individual items in radiogroup/checkbox/dropdown
-
Hide Rows and Columns in a Matrix Table
-
Hide Rows and Columns in a Matrix Dropdown Question
-
Conditional Logic to Enable or Disable Questions
-
Complete Trigger
-
CopyValue Trigger
-
SetValue Trigger
-
Run Expression Trigger
-
-
Text Formatting
-
Survey Localization
-
Input Validation
-
SurveyJS Storage
Bar Rating Widget
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.
Theme:
-
Templates
-
Simple Questions
-
Text Entry
-
Date-Time Entry
-
Numeric Entry
-
Color Input
-
Radio Button Group
-
Drop-Down Menu
-
Dropdown: Load Data from Web Services
-
Dropdown with Lazy Loading
-
Multi-Select Dropdown
-
Checkboxes
-
Carry Forward Responses
-
Image Picker
-
Yes/No Question
-
Signature Pad
-
Multiple Text Box
-
Rating
-
Ranking
-
Text Area / Comment
-
Image
-
Html
-
File
-
Expression
-
Expression (using async functions)
-
-
Matrix Table Questions
-
Panel & Dynamic Panel
-
Survey
-
Title and Logo
-
Questions in one line
-
Survey Options
-
Auto-Populate Form Fields
-
Piped Text
-
Edit saved survey
-
Read-only/display mode
-
Show Preview before complete
-
Pop-Up Survey
-
Context actions in element titles
-
Modify title tags
-
Custom render of survey elements
-
File - custom preview
-
File - delayed upload
-
Lazy questions rendering
-
-
Quizzes and Scored Surveys
-
Customize Rendering
-
Integration with Third-Party Libraries
-
Appearance customization
-
Navigation
-
Conditions and Triggers
-
Change Question Visibility
-
Simplify Cascade Conditions
-
Complex Questions in Expressions
-
Custom Functions in Expressions
-
Implement a Custom Expression Property
-
Dynamic Questions with Conditional Logic
-
Hide Question Elements (Rows, Columns, Choices)
-
Show/Hide individual items in radiogroup/checkbox/dropdown
-
Hide Rows and Columns in a Matrix Table
-
Hide Rows and Columns in a Matrix Dropdown Question
-
Conditional Logic to Enable or Disable Questions
-
Complete Trigger
-
CopyValue Trigger
-
SetValue Trigger
-
Run Expression Trigger
-
-
Text Formatting
-
Survey Localization
-
Input Validation
-
SurveyJS Storage