iOS-like wheel picker for Svelte with smooth inertia scrolling and infinite loop support.
runed
Installation
Install dependencies
Install the required packages for this component:
Copy the Source Code
Copy and paste the following code into your project:
index.ts
wheel-picker-wrapper.svelte
wheel-picker.svelte
Usage
usage.svelte
Features
- Natural touch scrolling with smooth inertia, mouse drag and scroll for desktop
- Infinite loop scrolling
- Unstyled core for complete style customization
- Full keyboard navigation and type-ahead search
Examples
Time picker
Combine three wheel pickers to select an hour, minute, and meridiem.
Props
WheelPicker
Keyboard, pointer, touch, and wheel-controlled option picker.
| Name | Type | Default | Description |
|---|---|---|---|
options | WheelPickerOption<T>[] | required | Values, labels, and disabled states available for selection. |
value | T | undefined | Bindable selected value. |
defaultValue | T | undefined | Initial selection when value is undefined. |
onValueChange | (value: T) => void | undefined | Called whenever interaction selects a different value. |
infinite | boolean | false | Repeats options to allow continuous looping. |
visibleCount | number | 20 | Number of wheel positions; must be a positive multiple of four. |
dragSensitivity | number | 3 | Multiplier applied to pointer and touch dragging. |
scrollSensitivity | number | 5 | Multiplier applied to wheel scrolling. |
optionItemHeight | number | 30 | Height of each option row in pixels. |
classes | WheelPickerClasses | undefined | Class overrides for optionItem, highlightWrapper, and highlightItem. |
ref | HTMLDivElement | null | null | Bindable reference to the picker element. |
WheelPickerWrapper
Styled group container for one or more wheel pickers.
| Name | Type | Default | Description |
|---|---|---|---|
children | Snippet | required | WheelPicker components rendered inside the group. |
class | string | undefined | Additional classes applied to the wrapper. |
ref | HTMLDivElement | null | null | Bindable reference to the wrapper element. |