Star Rating - JSON API V2 Examples

Example 1: Display Ratings (Readonly)

Show product ratings in display-only mode with different values including half-stars.

RSL.JSONLayout.renderLayout('#container', {
    version: 2,
    layoutId: "display-ratings",
    breakpoints: { xs: 1, md: 3 },
    gap: "1.5rem",
    items: [
        { content: { type: "star-rating", value: 5, readonly: true, showValue: true } },
        { content: { type: "star-rating", value: 4.5, readonly: true, showValue: true } },
        { content: { type: "star-rating", value: 3.5, readonly: true, showValue: true } }
    ]
});

Example 2: Size Variants

Star ratings in different sizes: small, medium, large, and extra-large.

RSL.JSONLayout.renderLayout('#container', {
    version: 2,
    layoutId: "size-variants",
    breakpoints: { xs: 1 },
    gap: "1rem",
    items: [
        { content: { type: "star-rating", value: 4, readonly: true, size: "small", showValue: true } },
        { content: { type: "star-rating", value: 4, readonly: true, size: "medium", showValue: true } },
        { content: { type: "star-rating", value: 4, readonly: true, size: "large", showValue: true } },
        { content: { type: "star-rating", value: 4, readonly: true, size: "xl", showValue: true } }
    ]
});

Example 3: Icon Types

Use stars, hearts, or thumbs-up icons for different contexts.

RSL.JSONLayout.renderLayout('#container', {
    version: 2,
    layoutId: "icon-types",
    breakpoints: { xs: 1, md: 3 },
    gap: "2rem",
    items: [
        { content: { type: "star-rating", value: 4, readonly: true, icon: "star", size: "large", showValue: true } },
        { content: { type: "star-rating", value: 4, readonly: true, icon: "heart", size: "large", showValue: true } },
        { content: { type: "star-rating", value: 4, readonly: true, icon: "thumb", size: "large", showValue: true } }
    ]
});

Example 4: Interactive Input

Allow users to select a rating. Click the stars or use arrow keys to change the value.

RSL.JSONLayout.renderLayout('#container', {
    version: 2,
    layoutId: "interactive-input",
    breakpoints: { xs: 1 },
    gap: "1.5rem",
    items: [
        {
            content: {
                type: "star-rating",
                value: 0,
                readonly: false,
                size: "large",
                showValue: true,
                clearable: true,
                label: "Rate this product"
            }
        }
    ]
});

Example 5: Custom Colors

Customize the filled and empty star colors to match your brand.

RSL.JSONLayout.renderLayout('#container', {
    version: 2,
    layoutId: "custom-colors",
    breakpoints: { xs: 1, md: 2 },
    gap: "2rem",
    items: [
        {
            content: {
                type: "star-rating",
                value: 4,
                readonly: true,
                size: "large",
                showValue: true,
                color: "#6E7BFF",
                emptyColor: "#c4caff"
            }
        },
        {
            content: {
                type: "star-rating",
                value: 4.5,
                readonly: true,
                size: "large",
                showValue: true,
                color: "#10b981",
                emptyColor: "#a7f3d0"
            }
        }
    ]
});

Example 6: Form Integration

Star rating with form field name and required validation.

RSL.JSONLayout.renderLayout('#container', {
    version: 2,
    layoutId: "form-integration",
    breakpoints: { xs: 1 },
    items: [
        {
            content: {
                type: "star-rating",
                value: 0,
                readonly: false,
                size: "large",
                showValue: true,
                clearable: true,
                name: "user_rating",
                required: true,
                label: "Your Rating (Required)"
            }
        }
    ]
});

Example 7: Product Card with Rating

Combining star rating inside a card component for product displays.

RSL.JSONLayout.renderLayout('#container', {
    version: 2,
    layoutId: "product-cards",
    breakpoints: { xs: 1, md: 3 },
    gap: "1.5rem",
    items: [
        {
            content: {
                type: "card",
                title: "Wireless Headphones",
                body: "Premium noise-canceling wireless headphones with 30-hour battery life.",
                price: "$129.99",
                customContent: {
                    type: "star-rating",
                    value: 4.5,
                    readonly: true,
                    showValue: true,
                    size: "small"
                }
            }
        },
        // ... more cards
    ]
});

Example 8: Different Max Values

Customize the maximum number of stars (default is 5).

RSL.JSONLayout.renderLayout('#container', {
    version: 2,
    layoutId: "max-values",
    breakpoints: { xs: 1 },
    gap: "1rem",
    items: [
        { content: { type: "star-rating", value: 3, max: 4, readonly: true, showValue: true, size: "large" } },
        { content: { type: "star-rating", value: 7, max: 10, readonly: true, showValue: true, size: "large" } }
    ]
});

Example 9: FilterBus Integration

Use star-rating-filter to create a filter panel that integrates with FilterBus. Click a rating option to filter the product cards below.

// Create a star rating filter panel
RSL.JSONLayout.renderLayout('#filter-container', {
    version: 2,
    breakpoints: { xs: 1 },
    items: [{
        content: {
            type: "star-rating-filter",
            field: "rating",
            max: 5,
            showCounts: true,
            counts: { 5: 12, 4: 28, 3: 15, 2: 8, 1: 3 },
            upAndAbove: true
        }
    }]
});

// Subscribe to filter changes
RSL.Filter.subscribe('rating', function(value) {
    // Filter your products based on rating
    filterProducts(value);
});

See it in action: FilterBus Demo Page

Star Rating V2 API