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 🚧