Syncfusion AI Assistant

How can I help you?

Precision Modes in React Rating Component

21 Feb 20264 minutes to read

Set the precision property to provide ratings with varying levels of precision.

The Rating component supports the following precision types:

  • 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 the Rating.
import { RatingComponent, PrecisionType } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';
// To render Rating.
function App() {
    return (<div className='wrap'>
            <label>Full Precision</label><br />
            <RatingComponent id='rating1' value={3} precision={PrecisionType.Full}></RatingComponent><br />
            <label>Half Precision</label><br />
            <RatingComponent id='rating2' value={2.5} precision={PrecisionType.Half}></RatingComponent><br />
            <label>Quarter Precision</label><br />
            <RatingComponent id='rating3' value={3.75} precision={PrecisionType.Quarter}></RatingComponent><br />
            <label>Exact Precision</label><br />
            <RatingComponent id='rating4' value={2.3} precision={PrecisionType.Exact}></RatingComponent><br />
        </div>);
}
export default App;
ReactDom.render(<App />, document.getElementById('element'));
// Import the Rating.
import { RatingComponent, PrecisionType } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';
import * as ReactDom from 'react-dom';

// To render Rating.
function App() {
  
    return (
        <div className='wrap'>
            <label>Full Precision</label><br/>
            <RatingComponent id='rating1' value={3} precision= {PrecisionType.Full} ></RatingComponent><br/>
            <label>Half Precision</label><br/>
            <RatingComponent id='rating2' value={2.5} precision= {PrecisionType.Half} ></RatingComponent><br/>
            <label>Quarter Precision</label><br/>
            <RatingComponent id='rating3' value={3.75} precision= {PrecisionType.Quarter} ></RatingComponent><br/>
            <label>Exact Precision</label><br/>
            <RatingComponent id='rating4' value={2.3} precision= {PrecisionType.Exact} ></RatingComponent><br/>
        </div>
    );
}
export default App;
ReactDom.render(<App />,document.getElementById('element'));