Precision modes in EJ2 TypeScript Rating control

29 Aug 20234 minutes 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.
import { Rating, PrecisionType } from '@syncfusion/ej2-inputs';
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

// Initialize the Full precision Rating control.
var rating1: Rating = new Rating({ value: 3, precision: PrecisionType.Full });
// Initialize the Half precision Rating control.
var rating2: Rating = new Rating({ value: 2.5, precision: PrecisionType.Half });
// Initialize the Quarter precision Rating control.
var rating3: Rating = new Rating({ value: 3.75, precision: PrecisionType.Quarter });
// Initialize the Exact precision Rating control.
var rating4: Rating = new Rating({ value: 2.3, precision: PrecisionType.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="https://cdn.syncfusion.com/ej2/25.1.35/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-inputs/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
    <div id='loader'>Loading....</div>
    <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>
</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;
}