Precision Modes in JavaScript (ES5) Rating control

08 May 2023 / 1 minute to read

You can use the precision property of the rating control to provide ratings with varying levels of precision.

The precision types of Rating are as follows:

Full: The rating is increased in whole number increments. For example, if the current rating is 2, the next possible ratings are 3, 4, and so on.
Half: The rating is increased in increments of 0.5 (half). For example, if the current rating is 2.5, the next possible ratings are 3, 3.5, 4, and so on.
Quarter: The rating is increased in increments of 0.25 (quarter). For example, if the current rating is 3.75, the next possible ratings are 4, 4.25, 4.5, and so on.
Exact: The rating is increased in increments of 0.1. For example, if the current rating is 3.9, the next possible ratings are 4, 4.1, 4.2, and so on.

Source

Preview

index.js

index.html

styles.css

ej.base.enableRipple(true);

// Initialize the Full precision Rating control.
var rating1 = new ej.inputs.Rating({ value: 3, precision: 'Full' });
// Initialize the Half precision Rating control.
var rating2 = new ej.inputs.Rating({ value: 2.5, precision: 'Half' });
// Initialize the Quarter precision Rating control.
var rating3 = new ej.inputs.Rating({ value: 3.75, precision: 'Quarter' });
// Initialize the Exact precision Rating control.
var rating4 = new ej.inputs.Rating({ value: 2.3, precision: 'Exact' });

// Render initialized Rating.
rating1.appendTo('#rating1');
rating2.appendTo('#rating2');
rating3.appendTo('#rating3');
rating4.appendTo('#rating4');

<!DOCTYPE html><html lang="en"><head>
            
    <title>EJ2 Rating</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="TypeScript Rating Control">
    <meta name="author" content="Syncfusion">
    <link href="styles.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-base/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-popups/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-inputs/styles/material.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/21.2.3/dist/ej2.min.js" type="text/javascript"></script>
</head>
<body>
    
    <div id="container">
        <div class="wrap">
            <label>Full Precision</label><br>
            <input id="rating1"><br>
            <label>Half Precision</label><br>
            <input id="rating2"><br>
            <label>Quarter Precision</label><br>
            <input id="rating3"><br>
            <label>Exact Precision</label><br>
            <input id="rating4"><br>
        </div>
    </div>

<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

#container {
    visibility: hidden;
}

#loader {
  color: #008cff;
  font-family: 'Helvetica Neue','calibiri';
  font-size: 14px;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}

.wrap {
  margin: 50px auto;
  text-align: center;
}