Slider

<script lang="ts">
	import Slider from '#lib/ui/Slider.svelte';

	let size = $state(18);
</script>

<!-- A fixed box, so the slider stays put while the text grows under it. -->
<div class="demo">
	<Slider label="Reading size" min={12} max={32} bind:value={size} format={(v) => `${v}px`} />
	<p style:font-size="{size}px">The House of Wisdom</p>
</div>

<style>
	.demo {
		display: grid;
		gap: 0.75rem;
		inline-size: 20rem;
		max-inline-size: 100%;
	}
	p {
		min-block-size: 5rem;
		margin: 0;
		line-height: 2.5rem;
	}
</style>

<script lang="ts">
	import Slider from '#lib/ui/Slider.svelte';

	let days = $state(40);
</script>

<Slider
	label="Loan length"
	min={7}
	max={90}
	step={1}
	bind:value={days}
	format={(v) => `${v} days`}
	hint="Arrow keys move one day; Page Up and Page Down move faster."
/>

<script lang="ts">
	import Slider from '#lib/ui/Slider.svelte';

	let years = $state<[number, number]>([830, 1060]);
</script>

<div class="demo">
	<Slider
		label="Copied between"
		min={750}
		max={1258}
		step={1}
		bind:value={years}
		format={(v) => `${v} CE`}
		thumbLabels={['From year', 'To year']}
		hint="From the founding of Baghdad to its fall."
	/>
</div>

<style>
	.demo {
		inline-size: min(24rem, 100%);
	}
</style>

<script lang="ts">
	import Slider from '#lib/ui/Slider.svelte';

	let lamp = $state(60);
</script>

<div class="demo">
	<Slider
		label="Reading lamp"
		bind:value={lamp}
		step={5}
		format={(v) => `${v}%`}
		marks={[
			{ value: 0, label: 'Off' },
			{ value: 25, label: '25%' },
			{ value: 50, label: '50%' },
			{ value: 75, label: '75%' },
			{ value: 100, label: 'Full' }
		]}
	/>
</div>

<style>
	.demo {
		inline-size: min(24rem, 100%);
	}
</style>