Precision Modes in JavaScript Rating control

08 May 2023 / 2 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.

Source

Preview

app.ts

index.html

styles.css

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="//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://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></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;
}