Svelte Component

Ratings

Create an visual representation of a numeric range.

typescript
import { Ratings } from '@skeletonlabs/skeleton';
Source Page Source

Demo

Perfect for creating a stars ratings for movies or ecommerce ratings. Supply any type of image, text, or icon for the empty, half, and full slots. Then adjust the value and max properties as desired. Note that SVG icons displayed verbatim, so you may need to adjust the fill color and responsive sizing.

Binding

User Interactivity

Use the interactive prop and on:icon events to add interactivity.

Emoji

💀 💀 💀 ☠️