Slider

<script lang="ts">
	import { Slider } from '@skeletonlabs/skeleton-svelte';

	let value = $state([40]);
</script>

<Slider name="example" bind:value />

<script lang="ts">
	import { Slider } from '@skeletonlabs/skeleton-svelte';

	let valueMulti = $state([40, 60]);
</script>

<Slider bind:value={valueMulti} />

<script lang="ts">
	import { Slider } from '@skeletonlabs/skeleton-svelte';

	let value = $state([40]);
</script>

<Slider bind:value markers={[25, 50, 75]} />

<script lang="ts">
	import { Slider } from '@skeletonlabs/skeleton-svelte';

	let value = $state([40]);
</script>

<section class="w-full space-y-8">
	<Slider name="value" bind:value height="h-1" />
	<Slider name="value" bind:value height="h-6" thumbSize="size-8" />
</section>

<script lang="ts">
	import { Slider } from '@skeletonlabs/skeleton-svelte';

	let value = $state([40]);
</script>

<section class="w-full space-y-8">
	<Slider bind:value meterBg="bg-primary-500" thumbRingColor="ring-primary-500" />
	<Slider bind:value meterBg="bg-secondary-500" thumbRingColor="ring-secondary-500" />
	<Slider bind:value meterBg="bg-tertiary-500" thumbRingColor="ring-tertiary-500" />
</section>

<script lang="ts">
	import { Slider } from '@skeletonlabs/skeleton-svelte';

	let value = $state([40]);
</script>

<section class="w-full space-y-4">
	<p>Disabled</p>
	<Slider name="value" bind:value disabled />
	<p>Read-Only</p>
	<Slider name="value" bind:value readOnly />
</section>

<script lang="ts">
	import { Slider } from '@skeletonlabs/skeleton-svelte';

	let value = $state([40]);
	let valueMulti = $state([40, 60]);
</script>

<section class="w-full space-y-8">
	<Slider bind:value dir="rtl" />
	<Slider bind:value={valueMulti} dir="rtl" />
</section>