Precision modes in Vue Rating component

29 Aug 20232 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.

app.vue

<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 Vue from 'vue';
import { RatingPlugin } from "@syncfusion/ej2-vue-inputs";
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);
Vue.use(RatingPlugin);

export default {}
</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>