// https://github.com/ErnaneJ/svelte-star-rating

import StarRatting from "@ernane/svelte-star-rating";

let config = {

readOnly: false,

countStars: 5,

range: {min: 0, max: 5, step: 0.001},

score: 3.785,

showScore: true,

scoreFormat: function(){ return `(${this.score.toFixed(0)}/${this.countStars})` },

starConfig: {

size: 30,

fillColor: '#F9ED4F',

strokeColor: "#000000",

unfilledColor: '#FFFFFF',

strokeUnfilledColor: '#000000F'

}

}

const changeSliderInput = () => console.table(config);

</script>

<main>

<div class="content">

<div class="star-rating">

<StarRatting bind:config on:change={changeSliderInput}/>

</div>

<div class="controllers">

<div class="form-group">

<label class="label-input" for="count-stars">Number of Stars</label>

<input class="star-input" type="number" name="count-stars" bind:value={config.countStars} step="1" min="0"/>

</div>

<div class="form-group">

<label class="label-input" for="range-min">Range - min</label>