JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://igniteui.com/js/modernizr.min.js"></script>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.core.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.lob.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.dv.js"></script>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet"></link>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/structure/infragistics.css" rel="stylesheet"></link>

<p>Select precision and decimal places</p>
    <div id="igRating1"></div>

    <div class="rating-options ui-helper-clearfix">

        <label>Current value: </label>
        <input id="currValue" type="text" value="" disabled=""></input>
        <br />
        <br />
        <label>Value as percent </label>
        <input id="chkPercent" type="checkbox" checked=""></input>
        <br />
        <br />

        <label>Precision</label>
        <select id="selectPrecision">
            <option value="exact">Exact</option>
            <option value="half">Half</option>
            <option selected="selected" value="whole">Whole (default)</option>
        </select>
        <br />
        <br />

        <div id="dynamicDiv">
            <label>Select decimal places</label>
            <select id="decimalPlaces">
                <option value="1">.0</option>
                <option value="2">.00</option>
                <option selected="selected" value="3">.000 (default)</option>
            </select>
        </div>

    </div>

CSS

.rating-options {
            width: 350px;
            margin-top: 20px;
        }

            .rating-options label {
                width: 200px;
            }

            .rating-options label, .rating-options select {
                float: left;
            }

        #selectPrecision, #decimalPlaces, #currValue {
            width: 130px;
        }

        .rating-options > div {
            margin: 7px 0;
        }

JavaScript

$(function () {

            $("#igRating1").igRating({
                voteCount: 10,
                valueAsPercent: true,
                value: 0.4,
                valueChange: function (evt, ui) {
                    $("#currValue").val(ui.value);
                }
            });

            $("#currValue").val($("#igRating1").igRating("value"));
            OnSelectPrecision($("#selectPrecision").val());

            $("#selectPrecision").change(function () {
                var value = $(this).val();
                OnSelectPrecision(value);
            });

            function OnSelectPrecision(value) {
                $("#igRating1").igRating("option", "precision", value);
                $("#dynamicDiv").css("visibility", (value === "exact") ? "visible" : "hidden");
                $("#currValue").val($("#igRating1").igRating("value"));
            }

            $("#decimalPlaces").change(function () {
                $("#igRating1").igRating("option", "roundedDecimalPlaces", parseInt($(this).val(), 10));
            });

            $("#chkPercent").change(function () {
                $("#igRating1").igRating("option", "valueAsPercent", $(this).is(":checked"));
                $("#currValue").val($("#igRating1").igRating("value"));
            });

        });