Rating

<script lang="ts">
	import { Rating } from '@skeletonlabs/skeleton-svelte';

	// You may optionally bind to a state rune
	let starValue = $state(2);
</script>

<Rating bind:value={starValue} />

<script lang="ts">
	import { Rating } from '@skeletonlabs/skeleton-svelte';
</script>

<Rating count={3} value={2}></Rating>

<script lang="ts">
	import { Rating } from '@skeletonlabs/skeleton-svelte';
	import { Bone, Skull } from 'lucide-svelte';
</script>

<Rating value={2}>
	{#snippet iconEmpty()}
		<Bone size={24} />
	{/snippet}
	{#snippet iconFull()}
		<Skull size={24} />
	{/snippet}
</Rating>

<script lang="ts">
	import { Rating } from '@skeletonlabs/skeleton-svelte';
</script>

<Rating value={2} allowHalf></Rating>

<script lang="ts">
	import { Rating } from '@skeletonlabs/skeleton-svelte';
</script>

<Rating value={2} disabled></Rating>

<script lang="ts">
	import { Rating } from '@skeletonlabs/skeleton-svelte';
</script>

<Rating value={2} readOnly></Rating>

<script lang="ts">
	import { Rating } from '@skeletonlabs/skeleton-svelte';
</script>

<Rating value={2} dir="rtl"></Rating>