JQuery Star Rating System For Bootstrap 4

A simple yet powerful JQuery star rating plugin for Bootstrap which supports advanced features like fractional star fill and RTL input support. Developed with a focus on utlizing pure CSS-3 styling to render the control. The plugin uses Bootstrap markup and styling by default, but it can be overridden with any other CSS markup. The primary features of Star Rating Plugin:

  • Convert any HTML input to a star rating control.
  • The plugin automatically converts an input to a star rating control if you set its class = rating. All options to the input can be passed as HTML5 data attributes.
  • You can use the HTML 5 number input for polyfill and the plugin will automatically use the number attributes like min, max, and step. However, number inputs have a problem with decimal values on the Chrome Browser.
  • Involves pure CSS3 styling of the stars. Say goodbye to image sprites or playing with image backgrounds. Offers clean scalable vector icons for consistent display across devices. Optionally one can use the Unicode character set to override symbols.
  • Use any of your favorite font icon frameworks to render your star symbols (for example you can easily use the icons from the FontAwesome library).
  • Render and display fractional star ratings. Configure number of stars, min, max, step, and theoretically support any fractional rating.
  • Uses Bootstrap 3.x styles & glyphs by default. But this can be overridden with plugin parameters and your own CSS styles.
  • Support for RIGHT TO LEFT (RTL) input. Automatically changes star styling for RTL.
  • Ability to clear values and options for the stars. Control where the clear button element can be shown.
  • Reset star rating to the initial value when the form is reset.
  • Ability to control and display caption of the selected stars. Each rated star can have its own caption. Control where the caption element can be shown.
  • Ability to size the rating control including the stars, caption, and clear button. Five prebuilt size templates are available xl, lg, md, sm, and xs.
  • Triggers JQuery events for advanced development. Events currently available are rating.change, rating.clear, rating.reset, rating.refresh, rating.hover, and rating.hoverleave.
  • Disabled and readonly input star rating support.
  • Change stars and caption on mouse hover (new feature since v3.0.0).
  • Change stars and caption on slide and drag for mobile/touch devices (new feature since v3.1.0).
  • Support for translations and locales.

Live Demo










How to Use

Add the css below to your html page

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link href="../css/star-rating.css" media="all" rel="stylesheet" type="text/css" />

Create a container where you want to render Star Rating

<form>
    <input id="input-21b" value="4" type="text" class="rating" data-min=0 data-max=5 data-step=0.2 data-size="lg"
        required title="">
    <div class="clearfix"></div>
    <hr>
    <input required id="input-21c" value="" type="text" title="">
    <div class="clearfix"></div>
    <hr>
    <input id="input-21d" value="2" type="text" class="rating" data-min=0 data-max=5 data-step=0.5 data-size="sm"
        title="">
    <hr>
    <input id="input-21e" value="0" type="text" class="rating" data-min=0 data-max=5 data-step=0.5 data-size="xs"
        title="">
    <hr>
    <input id="input-21f" value="0" type="text" data-min=0 data-max=5 data-step=0.1 data-size="md" title="">
    <hr>
    <input id="input-2ba" type="text" class="rating" data-min="0" data-max="5" data-step="0.5" data-stars=5
        data-symbol="&#xe005;" data-default-caption="{rating} hearts" data-star-captions="{}" title="">
    <hr>
    <input id="input-22" value="0" type="text" class="rating" data-min=0 data-max=5 data-step=0.5 data-rtl=1
        data-container-class='text-right' data-glyphicon=0 title="">
    <div class="clearfix"></div>
    <hr>
    <input required class="rb-rating" type="text" value="" title="">
    <hr>
    <input id="rating-input" type="text" title="" />
    <button id="btn-rating-input" type="button" class="btn btn-primary">Toggle Disable</button>
    <hr>
    <input id="kartik" class="rating" data-stars="5" data-step="0.1" title="" />
    <div class="form-group" style="margin-top:10px">
        <button type="submit" class="btn btn-primary">Submit</button>
        <button type="reset" class="btn btn-default">Reset</button>
        <button type="button" class="btn btn-danger">Destroy</button>
        <button type="button" class="btn btn-success">Create</button>
    </div>
</form>

Load jQuery library together with the Star Rating library into your code

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="../js/star-rating.js" type="text/javascript"></script>
<script>
    jQuery(document).ready(function () {
        $("#input-21f").rating({
            starCaptions: function (val) {
                if (val < 3) {
                    return val;
                } else {
                    return 'high';
                }
            },
            starCaptionClasses: function (val) {
                if (val < 3) {
                    return 'label label-danger';
                } else {
                    return 'label label-success';
                }
            },
            hoverOnClear: false
        });
        var $inp = $('#rating-input');

        $inp.rating({
            min: 0,
            max: 5,
            step: 1,
            size: 'lg',
            showClear: false
        });

        $('#btn-rating-input').on('click', function () {
            $inp.rating('refresh', {
                showClear: true,
                disabled: !$inp.attr('disabled')
            });
        });


        $('.btn-danger').on('click', function () {
            $("#kartik").rating('destroy');
        });

        $('.btn-success').on('click', function () {
            $("#kartik").rating('create');
        });

        $inp.on('rating.change', function () {
            alert($('#rating-input').val());
        });


        $('.rb-rating').rating({
            'showCaption': true,
            'stars': '3',
            'min': '0',
            'max': '3',
            'step': '1',
            'size': 'xs',
            'starCaptions': {
                0: 'status:nix',
                1: 'status:wackelt',
                2: 'status:geht',
                3: 'status:laeuft'
            }
        });
        $("#input-21c").rating({
            min: 0,
            max: 8,
            step: 0.5,
            size: "xl",
            stars: "8"
        });
    });
</script>

Source Code

Download

For more Advanced Usages, please check the demo page or visit the official website.