#### Ratings

#### Default Ratings

Make sure to include following js files at end of `body element`

                                                            <script src="assets/js/vendor/jquery.rateit.min.js"></script>

                                                            <div class="rateit" data-rateit-mode="font">
                                                            </div>

#### Icon Font - Change icon

                                                            <div class="rateit"  data-rateit-icon="@" data-rateit-mode="font">
                                                            </div>

#### Progressive enhancement (using select)

                                                            <select id="backing3b">
                                                                <option value="0">Bad</option>
                                                                <option value="1" selected="selected">OK</option>
                                                                <option value="2">Good</option>
                                                                <option value="3">Great</option>
                                                                <option value="4">Excellent</option>
                                                            </select>
                                                            <div class="rateit rateit-mdi" data-rateit-backingfld="#backing3b" data-rateit-mode="font" data-rateit-icon="󰓒"></div>

#### Javascript interaction

Make sure to include following js files at end of `body element`

                                                            <!-- Plgins only -->
                                                            <script src="assets/js/vendor/jquery.rateit.min.js"></script>
                                                            <script src="assets/js/ui/component.rating.js"></script>

                                                            <div class="rateit rateit-mdi" id="js-interaction" data-rateit-min="2" data-rateit-mode="font" data-rateit-icon="󰓒">
                                                            </div>
                                                            <div>
                                                                <span id="jsvalue"></span>
                                                                <span id="jshover"></span>
                                                            </div>

#### RTL support

Now we are in RTL mode. No changes needed to make this work

                                                            <div style="direction: rtl">
                                                                <div class="rateit rateit-mdi" data-rateit-mode="font" data-rateit-icon="󰓒">
                                                                </div>
                                                            </div>

#### Material Design Icons

                                                            <!-- Star -->
                                                            <div class="rateit rateit-mdi" data-rateit-mode="font" data-rateit-icon="󰓒">
                                                            </div>

                                                            <!-- Heart -->
                                                            <div class="rateit rateit-mdi mt-3" data-rateit-mode="font" data-rateit-icon="󰋕">
                                                            </div>

#### Icon Font - Sizing

                                                            <div class="rateit rateit-mdi" data-rateit-mode="font" data-rateit-icon="󰓒" style="font-size: 36px;">
                                                            </div>

#### Readonly and preset value

                                                            <div class="rateit rateit-mdi" data-rateit-mode="font" data-rateit-icon="󰓒"  data-rateit-value="2.5" data-rateit-ispreset="true" data-rateit-readonly="true">
                                                            </div>

#### Setting and Getting values

All properties can also be set on the fly. Here are a few examples:

                                                            <div class="rateit rateit-mdi" data-rateit-mode="font" data-rateit-icon="󰓒" id="getting-values">
                                                            </div>

                                                            <!-- Onclick events -->
                                                            <button class="btn btn-sm btn-primary" onclick="alert($('#getting-values').rateit('value'))">Get value</button>
                                                            <button class="btn btn-sm btn-primary" onclick="$('#getting-values').rateit('value', prompt('Input numerical value'))">Set value</button>
                                                            <button class="btn btn-sm btn-primary" onclick="alert($('#getting-values').rateit('max'))">Get max value</button>
                                                            <button class="btn btn-sm btn-primary" onclick="$('#getting-values').rateit('max', prompt('Input numerical value'))">Set max value</button>
                                                            <button class="btn btn-sm btn-primary" onclick="alert($('#getting-values').rateit('step'))">Get step size</button>
                                                            <button class="btn btn-sm btn-primary" onclick="$('#getting-values').rateit('step', prompt('Input numerical value'))">Set step size</button>
                                                            <button class="btn btn-sm btn-primary" onclick="alert($('#getting-values').rateit('readonly'))">Get readonly value</button>
                                                            <button class="btn btn-sm btn-primary" onclick="$('#getting-values').rateit('readonly',!$('#getting-values').rateit('readonly'))">Toggle readonly</button>
                                                            <button class="btn btn-sm btn-primary" onclick="alert($('#getting-values').rateit('ispreset'))">Get ispreset value</button>
                                                            <button class="btn btn-sm btn-primary" onclick="$('#getting-values').rateit('ispreset',!$('#getting-values').rateit('ispreset'))">Toggle ispreset</button>
                                                            <button class="btn btn-sm btn-primary" onclick="$('#getting-values').rateit('reset')">Reset</button>

##### Settings

Customize the overall color scheme, sidebar menu, etc.

##### Color Scheme

Light Mode
Dark Mode

##### Width

Fluid
Boxed

##### Left Sidebar

Default
Light
Dark
Fixed
Condensed
Scrollable
Purchase Now