PUSlider Component
A hand-drawn style slider component with smooth interactions and multiple customization options
Usage
Basic Usage
With Labels
With Markers
Disabled State
Vertical Orientation
Props
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
| modelValue | number | No | 0 | Current slider value |
| min | number | No | 0 | Minimum value |
| max | number | No | 100 | Maximum value |
| step | number | No | 1 | Step increment |
| orientation | horizontal | vertical | No | horizontal | Slider orientation |
| showMarkers | boolean | No | false | Show step markers |
| showLabels | boolean | No | false | Show min/max labels |
| disabled | boolean | No | false | Disable the slider |
| customClass | string | No | '' | Custom CSS classes |
Events
| Event | Payload | Description |
|---|---|---|
| update:modelValue | number | Emitted when value changes |
| change | number | Emitted when dragging ends |
Features
- Hand-drawn style track and thumb with organic shadows
- Smooth drag interactions with mouse and touch support
- Click-to-position functionality on track
- Optional step markers and labels
- Vertical and horizontal orientations
- Disabled state support
- Dark mode support
- Responsive design with mobile touch support
Dependencies
- Tailwind CSS for styling
- Vue 3 Composition API