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 keyboard input.
Features:
npm i svelt-rating-selector-display
<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} />
<script>
import { RatingSelector } from 'svelte-rating-selector-display';
</script>
<RatingSelector rating={3.35} />
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.
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: '☆';
}
<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} />