svelt-rating-selector-display

This small, dependency-free Svelte component enables effortless user rating input and display. It offers seamless customization with Unicode characters to suit individual preferences. Moreover, it boasts full reactivity to ensure a smooth and dynamic user experience. Has user accesability, and allows keyboard input.

Features:

Custom Theming
Custom Icons Using Unicode Characters
Get customer Ratings
Present Ratings with Utmost Precision
Set the Number Rating Icons
All Props are Reactive
Keyboard Shortcuts
Built in User Accesability
Handles Null values

How to istall

npm i svelt-rating-selector-display

How to use

How to get ratings

<script>
	import { RatingSelector } from 'svelte-rating-selector-display';
	let rating = Null; // This will be updated when a user selects a rating
</script>

<RatingSelector bind:rating enableSelection={true} />

How to display ratings

<script>
	import { RatingSelector } from 'svelte-rating-selector-display';
</script>

<RatingSelector rating={3.35} />

Props

Prop	Type	Description	Default Value
`rating`	number \| null	Inital displayed rating, if null no rating is displayed	null
`enableSelection`	boolean \| null	If true the user can select a rating, if false a static rating will be displayed	false
`numberOfIcons`	number \| null	The number of icons to display for the rating	5
`style`	[key: string]: string \| null	A list of styles to be applied to the parent element of the selector	null

If null is passed in for a prop, it will be set as the default value.

How to format

CSS variables

Colors:	Default Value	Description
`--icon-selected-color`	`#ffd700`	Color of rating icons when they are selected
`--icon-unselected-hover-color`	`#ccc`	Color of rating icons when they are not selected
`--icon-selected-hover-color`	`#f9dd39`	Color of rating icons when they are selcted and hovered over
`--icon-unslected-color`	`#f9e053b1`	Color of rating icons when they are unslected and hovered over
`--focused-stroke-color`	`#ffffff`	Color of stroke around rating icon when it is focused. This is for keyboard use, and user accessibility

Formating:	Default Value	Description
`--icon-size`	`3.5rem`	Size of the rating icons
`--icon-spacing`	`0rem`	Space between rating icons
`--selector-icon`	`★`	Icon to be desplayed
`--focused-stroke-size`	`3px`	Size of stroke around rating icon when it is focused. This is for keyboard use, and user accessibility

example:

:root {
	--icon-selected-color: #211b27;
	--icon-unselected-hover-color: #948f97;
	--selector-icon: '☆';
}

Using style prop

<script>
	import { RatingSelector } from 'svelte-rating-selector-display';
	const style = {
		'--icon-selected-color': '#211B27',
		'--icon-unselected-color': '#948F97',
		'--selector-icon': JSON.stringify('☆'), // Note: --selection-icon must be stringified
	};
</script>

<RatingSelector rating={3.7} {style} />