You can use the showLabel property to display a label that shows the current value of the rating. When the showLabel property is set to true, a label will be displayed.
ej.base.enableRipple(true);
// Initialize the Rating control.
var rating = new ej.inputs.Rating({ showLabel: true, value:3 });
// Render initialized Rating.
rating.appendTo('#rating');<!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://cdn.syncfusion.com/ej2/21.2.3/dist/ej2.min.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<div class="wrap">
<input id="rating">
</div>
</div>
<script type="text/x-jsrender" id="labelTemplate">
<span>${value} out of 5</span>
</script>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</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;
}The rating control allows you to place the label on the top, bottom, left, or right side of the rating using the labelPosition property.
The following label positions are supported:
ej.base.enableRipple(true);
// Initialize the Label Position Left Rating control.
var rating1 = new ej.inputs.Rating({ value:3, showLabel:true, labelPosition:"Left"});
// Initialize the Label Position Right Rating control.
var rating2 = new ej.inputs.Rating({ value:3, showLabel:true, });
// Initialize the Label Position Top Rating control.
var rating3 = new ej.inputs.Rating({ value:3, showLabel:true, labelPosition:"Top" });
// Initialize the Label Position Bottom Rating control.
var rating4 = new ej.inputs.Rating({ value:3, showLabel:true, labelPosition:"Bottom" });
// 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://cdn.syncfusion.com/ej2/21.2.3/dist/ej2.min.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<div class="wrap">
<label>Left Label Position</label><br>
<input id="rating1"><br>
<label>Right Label Position</label><br>
<input id="rating2"><br>
<label>Top Label Position </label><br>
<input id="rating3"><br>
<label>Bottom Label Position</label><br>
<input id="rating4"><br>
</div>
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</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;
}You can use the labelTemplate tag directive to specify a custom template for the Label of the rating. The current value of the rating will be passed as the value property in the template context when building the content of the label. This allows you to include dynamic information about the rating in the template.
ej.base.enableRipple(true);
// Initialize the Rating control.
var rating = new ej.inputs.Rating({ showLabel: true, labelTemplate: '#labelTemplate', value:3 });
// Render initialized Rating.
rating.appendTo('#rating');<!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://cdn.syncfusion.com/ej2/21.2.3/dist/ej2.min.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<div class="wrap">
<input id="rating">
</div>
</div>
<script type="text/x-jsrender" id="labelTemplate">
<span>${value} out of 5</span>
</script>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</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;
}