I am currently working on a slider that changes the visible content upon dragging. I'm trying to implement a custom button that says "drag" to control the slider progress. Here is my current code within the slider component:
<script lang="ts"> import { Slider as SliderPrimitive } from "bits-ui"; import { cn } from "$lib/utils.js"; type $$Props = SliderPrimitive.Props; let className: $$Props["class"] = undefined; export let value: $$Props["value"] = [0]; export { className as class };</script><SliderPrimitive.Root bind:value class={cn("relative flex w-full touch-none select-none items-center", className )} {...$$restProps} let:thumbs><span class="relative h-2 w-[full] grow overflow-hidden rounded-full bg-secondary"><SliderPrimitive.Range class="absolute h-full bg-primary" /></span> {#each thumbs as thumb}<SliderPrimitive.Thumb {thumb} class="block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" /> {/each}</SliderPrimitive.Root>And here is where I am implementing the slider within the Exhibit.svelte component:
<script lang="ts"> // Import necessary modules and dependencies import { Slider } from "$lib/components/ui/slider"; import { onMount } from "svelte"; // Define interface for Exhibit data interface Exhibit { title: string; description: string; // Add more properties as needed } // Define component let exhibits: Exhibit[] = [ // Initialize with sample data { title: "Exhibit 1", description: "Description 1", }, { title: "Exhibit 2", description: "Description 2", }, { title: "Exhibit 3", description: "Description 3", }, { title: "Exhibit 4", description: "Description 4", }, ]; // Declare and initialize the value variable as an array let value: number[] = [0]; // Function to calculate current stage based on slider value function getCurrentStage(value: number[]): number { const stageCount = exhibits.length; const step = 100 / (stageCount - 1); return Math.round(value[0] / step); }</script><!-- Display current exhibit based on currentStage -->{#if getCurrentStage(value) === 0}<div class="bg-gray-800 p-4"><h2 class="text-white text-4xl">{exhibits[0].title}</h2><p class="text-white text-lg">{exhibits[0].description}</p></div>{:else if getCurrentStage(value) === 1}<div class="bg-gray-800 p-4"><h2 class="text-white text-4xl">{exhibits[1].title}</h2><p class="text-white text-lg">{exhibits[1].description}</p></div>{:else if getCurrentStage(value) === 2}<div class="bg-gray-800 p-4"><h2 class="text-white text-4xl">{exhibits[2].title}</h2><p class="text-white text-lg">{exhibits[2].description}</p></div>{:else if getCurrentStage(value) === 3}<div class="bg-gray-800 p-4"><h2 class="text-white text-4xl">{exhibits[3].title}</h2><p class="text-white text-lg">{exhibits[3].description}</p></div>{/if}<Slider bind:value max={100} step={33} class="h-48" /><style> /* Add any additional styles here */</style>I am using the schadcn-svelte slider component here
I am new to svelte and typescript so any suggestions or input is greatly appreciated.