<script lang="ts">
	import { writable } from 'svelte/store';
	import { RangeSlider } from '@skeletonlabs/skeleton';

	export let form;
	export let errors;
	export let validate;
	export let field;
	export let constraints;

	const state = writable(0);
</script>

<div class="mb-4">
	<label for={field.name} class="block mb-2 font-semibold text-white">
		{field.name.charAt(0).toUpperCase() + field.name.slice(1)}
	</label>
	<RangeSlider
		name={field.name}
		bind:value={$form[field.name]}
		min={0}
		max={100}
		step={1}
		ticked
		{...constraints[field.name]}
	>
		<div class="flex items-center justify-between">
			<div class="text-xs">{$form[field.name]} / 100</div>
		</div>
	</RangeSlider>
</div>
