Precision modes in Vue Rating component

11 Jun 20243 minutes to read

You can use the precision property of the rating component 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.
<template>
    <div class='wrap'>
        <label>Full Precision</label><br/>
        <ejs-rating id="rating1" value="3" precision="Full"></ejs-rating><br/>
        <label>Half Precision</label><br/>
        <ejs-rating id="rating2" value="2.5" precision="Half"></ejs-rating><br/>
        <label>Quarter Precision</label><br/>
        <ejs-rating id="rating3" value="3.75" precision="Quarter"></ejs-rating><br/>
        <label>Exact Precision</label><br/>
        <ejs-rating id="rating4" value="2.3" precision="Exact"></ejs-rating><br/>
    </div>
</template>

<script setup>

import { RatingComponent as EjsRating} from "@syncfusion/ej2-vue-inputs";
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

</script>

<style>
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';

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

</style>
<template>
  <div class='wrap'>
    <label>Full Precision</label><br />
    <ejs-rating id="rating1" value="3" precision="Full"></ejs-rating><br />
    <label>Half Precision</label><br />
    <ejs-rating id="rating2" value="2.5" precision="Half"></ejs-rating><br />
    <label>Quarter Precision</label><br />
    <ejs-rating id="rating3" value="3.75" precision="Quarter"></ejs-rating><br />
    <label>Exact Precision</label><br />
    <ejs-rating id="rating4" value="2.3" precision="Exact"></ejs-rating><br />
  </div>
</template>

<script>

import { RatingComponent } from "@syncfusion/ej2-vue-inputs";
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

export default {
  name: "App",
  components: {
    "ejs-rating": RatingComponent
  },
}
</script>

<style>
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';

.wrap {
  margin: 50px auto;
  text-align: center;
}
</style>