Slider

Enable users to select a value within a specific range with sliding handles.

	<script lang="ts">
  import * as Slider from "@/components//ui/slider";
</script>
 
<Slider.Root value={[50]} max={100} step={1} class="max-w-[70%]" />

	<script lang="ts">
  import * as Slider from "@/components//ui/slider";
</script>
 
<Slider.Root value={[50]} max={100} step={1} class="max-w-[70%]" />

Structure

	<script lang="ts">
  import { Slider } from "bits-ui";
</script>
 
<Slider.Root>
  <Slider.Range />
  <Slider.Thumb />
  <Slider.Input />
</Slider.Root>

	<script lang="ts">
  import { Slider } from "bits-ui";
</script>
 
<Slider.Root>
  <Slider.Range />
  <Slider.Thumb />
  <Slider.Input />
</Slider.Root>

🚧 UNDER CONSTRUCTION 🚧