Components · Slider · Use

Slider

Choose a configuration and copy the result.

Intensity

State

Markup

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

<Slider.Root defaultValue={[62]} min={0} max={100} class="slider-root">
	<Slider.Label class="slider-label">Intensity</Slider.Label>
	<Slider.Control class="slider-control">
		<Slider.Track class="slider-track"><Slider.Range class="slider-range" /></Slider.Track>
		<Slider.Thumb index={0} class="slider-thumb"><Slider.HiddenInput /></Slider.Thumb>
	</Slider.Control>
	
</Slider.Root>