This is the llms.txt documentation for the "sliders" directory of the Origin UI - Svelte project. # "sliders" directory > A collection of production-ready, accessible UI components built with Svelte 5 and Tailwind CSS. These components are designed to be drop-in solutions for rapidly building modern web applications. This documentation covers 27 components, each following best practices for accessibility, performance, and type safety. ## Components ## slider-01 > A type-safe, accessible slider-01 component for building modern UIs. This component is part of the sliders collection. ### Core Information - **Component ID**: `slider-01` - **Location**: `/src/lib/components/sliders/slider-01.svelte` - **Type**: UI Component ### Usage ```svelte Full component implementation: ```svelte
``` ### Links - [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/sliders/slider-01.svelte) ## slider-02 > A type-safe, accessible slider-02 component for building modern UIs. This component is part of the sliders collection. ### Core Information - **Component ID**: `slider-02` - **Location**: `/src/lib/components/sliders/slider-02.svelte` - **Type**: UI Component ### Usage ```svelte Full component implementation: ```svelte
``` ### Links - [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/sliders/slider-02.svelte) ## slider-03 > A type-safe, accessible slider-03 component for building modern UIs. This component is part of the sliders collection. ### Core Information - **Component ID**: `slider-03` - **Location**: `/src/lib/components/sliders/slider-03.svelte` - **Type**: UI Component ### Usage ```svelte Full component implementation: ```svelte
``` ### Links - [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/sliders/slider-03.svelte) ## slider-04 > A type-safe, accessible slider-04 component for building modern UIs. This component is part of the sliders collection. ### Core Information - **Component ID**: `slider-04` - **Location**: `/src/lib/components/sliders/slider-04.svelte` - **Type**: UI Component ### Usage ```svelte Full component implementation: ```svelte
``` ### Links - [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/sliders/slider-04.svelte) ## slider-05 > A type-safe, accessible slider-05 component for building modern UIs. This component is part of the sliders collection. ### Core Information - **Component ID**: `slider-05` - **Location**: `/src/lib/components/sliders/slider-05.svelte` - **Type**: UI Component ### Usage ```svelte Full component implementation: ```svelte
``` ### Links - [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/sliders/slider-05.svelte) ## slider-06 > A type-safe, accessible slider-06 component for building modern UIs. This component is part of the sliders collection. ### Core Information - **Component ID**: `slider-06` - **Location**: `/src/lib/components/sliders/slider-06.svelte` - **Type**: UI Component ### Usage ```svelte Full component implementation: ```svelte
``` ### Links - [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/sliders/slider-06.svelte) ## slider-07 > A type-safe, accessible slider-07 component for building modern UIs. This component is part of the sliders collection. ### Core Information - **Component ID**: `slider-07` - **Location**: `/src/lib/components/sliders/slider-07.svelte` - **Type**: UI Component ### Usage ```svelte Full component implementation: ```svelte
``` ### Links - [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/sliders/slider-07.svelte) ## slider-08 > A type-safe, accessible slider-08 component for building modern UIs. This component is part of the sliders collection. ### Core Information - **Component ID**: `slider-08` - **Location**: `/src/lib/components/sliders/slider-08.svelte` - **Type**: UI Component ### Usage ```svelte Full component implementation: ```svelte
{value}
``` ### Links - [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/sliders/slider-08.svelte) ## slider-09 > A type-safe, accessible slider-09 component for building modern UIs. This component is part of the sliders collection. ### Core Information - **Component ID**: `slider-09` - **Location**: `/src/lib/components/sliders/slider-09.svelte` - **Type**: UI Component ### Usage ```svelte Full component implementation: ```svelte
``` ### Links - [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/sliders/slider-09.svelte) ## slider-10 > A type-safe, accessible slider-10 component for building modern UIs. This component is part of the sliders collection. ### Core Information - **Component ID**: `slider-10` - **Location**: `/src/lib/components/sliders/slider-10.svelte` - **Type**: UI Component ### Usage ```svelte Full component implementation: ```svelte
``` ### Links - [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/sliders/slider-10.svelte) ## slider-11 > A type-safe, accessible slider-11 component for building modern UIs. This component is part of the sliders collection. ### Core Information - **Component ID**: `slider-11` - **Location**: `/src/lib/components/sliders/slider-11.svelte` - **Type**: UI Component ### Usage ```svelte Full component implementation: ```svelte
``` ### Links - [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/sliders/slider-11.svelte) ## slider-12 > A type-safe, accessible slider-12 component for building modern UIs. This component is part of the sliders collection. ### Core Information - **Component ID**: `slider-12` - **Location**: `/src/lib/components/sliders/slider-12.svelte` - **Type**: UI Component ### Usage ```svelte Full component implementation: ```svelte
{value[0]} - {value[1]}
``` ### Links - [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/sliders/slider-12.svelte) ## slider-13 > A type-safe, accessible slider-13 component for building modern UIs. This component is part of the sliders collection. ### Core Information - **Component ID**: `slider-13` - **Location**: `/src/lib/components/sliders/slider-13.svelte` - **Type**: UI Component ### Usage ```svelte ### Dependencies Required packages and components: - [`lucide-svelte`](https://github.com/lucide-icons/lucide) Full component implementation: ```svelte
{value}
``` ### Links - [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/sliders/slider-13.svelte) ## slider-14 > A type-safe, accessible slider-14 component for building modern UIs. This component is part of the sliders collection. ### Core Information - **Component ID**: `slider-14` - **Location**: `/src/lib/components/sliders/slider-14.svelte` - **Type**: UI Component ### Usage ```svelte Full component implementation: ```svelte
`${value}%`} />
``` ### Links - [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/sliders/slider-14.svelte) ## slider-15 > A type-safe, accessible slider-15 component for building modern UIs. This component is part of the sliders collection. ### Core Information - **Component ID**: `slider-15` - **Location**: `/src/lib/components/sliders/slider-15.svelte` - **Type**: UI Component ### Usage ```svelte ### Dependencies Required packages and components: - [`lucide-svelte`](https://github.com/lucide-icons/lucide) Full component implementation: ```svelte
{#snippet child({ props })} {/snippet} Reset to default
``` ### Links - [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/sliders/slider-15.svelte) ## slider-16 > A type-safe, accessible slider-16 component for building modern UIs. This component is part of the sliders collection. ### Core Information - **Component ID**: `slider-16` - **Location**: `/src/lib/components/sliders/slider-16.svelte` - **Type**: UI Component ### Usage ```svelte Full component implementation: ```svelte
``` ### Links - [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/sliders/slider-16.svelte) ## slider-17 > A type-safe, accessible slider-17 component for building modern UIs. This component is part of the sliders collection. ### Core Information - **Component ID**: `slider-17` - **Location**: `/src/lib/components/sliders/slider-17.svelte` - **Type**: UI Component ### Usage ```svelte Full component implementation: ```svelte
{labels[value - 1]}
😡 😍
``` ### Links - [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/sliders/slider-17.svelte) ## slider-18 > A type-safe, accessible slider-18 component for building modern UIs. This component is part of the sliders collection. ### Core Information - **Component ID**: `slider-18` - **Location**: `/src/lib/components/sliders/slider-18.svelte` - **Type**: UI Component ### Usage ```svelte Full component implementation: ```svelte
labels[value - 1]} aria-label="Rate your experience" /> {emojis[value - 1]}
``` ### Links - [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/sliders/slider-18.svelte) ## slider-19 > A type-safe, accessible slider-19 component for building modern UIs. This component is part of the sliders collection. ### Core Information - **Component ID**: `slider-19` - **Location**: `/src/lib/components/sliders/slider-19.svelte` - **Type**: UI Component ### Usage ```svelte Full component implementation: ```svelte
handleInputChange(e, 0)} aria-label="Enter minimum value" /> handleInputChange(e, 1)} aria-label="Enter maximum value" />
``` ### Links - [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/sliders/slider-19.svelte) ## slider-20 > A type-safe, accessible slider-20 component for building modern UIs. This component is part of the sliders collection. ### Core Information - **Component ID**: `slider-20` - **Location**: `/src/lib/components/sliders/slider-20.svelte` - **Type**: UI Component ### Usage ```svelte ### Dependencies Required packages and components: - [`lucide-svelte`](https://github.com/lucide-icons/lucide) Full component implementation: ```svelte
``` ### Links - [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/sliders/slider-20.svelte) ## slider-21 > A type-safe, accessible slider-21 component for building modern UIs. This component is part of the sliders collection. ### Core Information - **Component ID**: `slider-21` - **Location**: `/src/lib/components/sliders/slider-21.svelte` - **Type**: UI Component ### Usage ```svelte Full component implementation: ```svelte
``` ### Links - [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/sliders/slider-21.svelte) ## slider-22 > A type-safe, accessible slider-22 component for building modern UIs. This component is part of the sliders collection. ### Core Information - **Component ID**: `slider-22` - **Location**: `/src/lib/components/sliders/slider-22.svelte` - **Type**: UI Component ### Usage ```svelte Full component implementation: ```svelte
``` ### Links - [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/sliders/slider-22.svelte) ## slider-23 > A type-safe, accessible slider-23 component for building modern UIs. This component is part of the sliders collection. ### Core Information - **Component ID**: `slider-23` - **Location**: `/src/lib/components/sliders/slider-23.svelte` - **Type**: UI Component ### Usage ```svelte Full component implementation: ```svelte
``` ### Links - [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/sliders/slider-23.svelte) ## slider-24 > A type-safe, accessible slider-24 component for building modern UIs. This component is part of the sliders collection. ### Core Information - **Component ID**: `slider-24` - **Location**: `/src/lib/components/sliders/slider-24.svelte` - **Type**: UI Component ### Usage ```svelte Full component implementation: ```svelte
``` ### Links - [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/sliders/slider-24.svelte) ## slider-25 > A type-safe, accessible slider-25 component for building modern UIs. This component is part of the sliders collection. ### Core Information - **Component ID**: `slider-25` - **Location**: `/src/lib/components/sliders/slider-25.svelte` - **Type**: UI Component ### Usage ```svelte ### Dependencies Required packages and components: - [`lucide-svelte`](https://github.com/lucide-icons/lucide) Full component implementation: ```svelte
Object position
handleInputChange(e, 'x')} {min} {max} value={value.x} aria-label="Enter value" />
handleInputChange(e, 'y')} {min} {max} value={value.y} aria-label="Enter value" />
handleInputChange(e, 'z')} {min} {max} value={value.z} aria-label="Enter value" />
``` ### Links - [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/sliders/slider-25.svelte) ## slider-26 > A type-safe, accessible slider-26 component for building modern UIs. This component is part of the sliders collection. ### Core Information - **Component ID**: `slider-26` - **Location**: `/src/lib/components/sliders/slider-26.svelte` - **Type**: UI Component ### Usage ```svelte Full component implementation: ```svelte
handleInputChange(e, 0)} {min} max={value[1]} value={value[0]} aria-label="Enter minimum price" /> $
handleInputChange(e, 1)} min={value[0]} {max} value={value[1]} aria-label="Enter maximum price" /> $
``` ### Links - [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/sliders/slider-26.svelte) ## slider-27 > A type-safe, accessible slider-27 component for building modern UIs. This component is part of the sliders collection. ### Core Information - **Component ID**: `slider-27` - **Location**: `/src/lib/components/sliders/slider-27.svelte` - **Type**: UI Component ### Usage ```svelte Full component implementation: ```svelte
Equalizer
``` ### Links - [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/sliders/slider-27.svelte)