---
metaTitle: Slider component | AwesCode UI
meta:
  - name: description
    content: The <AwSlider /> component is used to render Slider - UI Vue component for AwesCode UI.
title: Slider
---

# Slider

**Category:** Atom | **Import:** Global

The `AwSlider` component provides a horizontal scrollable container with drag support and shadow indicators.

## Overview

`AwSlider` creates a horizontal scrolling container that supports mouse and touch drag gestures. It shows shadow indicators on the left and right edges when content can be scrolled, and prevents click events during drag operations.

## Usage

### Basic Example

```markup
<AwSlider :gap="4">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
</AwSlider>
```

### Custom Tag

```markup
<AwSlider tag="section" :gap="3">
    <div>Scrollable content</div>
</AwSlider>
```

### With Gap Spacing

```markup
<AwSlider :gap="6">
    <AwCard v-for="n in 5" :key="n" class="flex-shrink-0">
        Card {{ n }}
    </AwCard>
</AwSlider>
```

## API

### Props

| Name | Description | Type | Required | Default |
|------|-------------|------|----------|---------|
| tag | HTML tag for container | `String` | `false` | `'div'` |
| gap | Gap between items (1-8) | `Number` | `false` | `0` |

### Slots

| Name | Description | Props | Default Slot Content |
|------|-------------|-------|---------------------|
| default | Scrollable content | - | - |

### Events

| Name | Payload | Description |
|------|---------|-------------|
| resized | - | Emitted when container is resized |

### Methods

| Name | Parameters | Description |
|------|-----------|-------------|
| scrollTo | `element` | Scrolls to the specified child element |

## Component Behavior

### Scrolling Mechanism

The component provides multiple ways to scroll:
- **Mouse drag:** Click and drag horizontally to scroll
- **Touch drag:** Touch and swipe horizontally on mobile devices
- **Native scroll:** Use scrollbar or trackpad/mouse wheel
- **Programmatic:** Use the `scrollTo(element)` method

### Drag Detection

The component intelligently distinguishes between clicks and drags:
- **Click threshold (time):** 300ms - Movement within this time may be treated as click
- **Click threshold (distance):** 5px - Movement less than this may be treated as click
- **Drag detection:** If movement exceeds either threshold, it's treated as a drag
- **Click prevention:** During drag operations, click events are prevented to avoid unintended actions

### Shadow Indicators

Visual feedback for scrollable content:
- **Left shadow:** Appears when content can be scrolled to the left (opacity: 0 when at start)
- **Right shadow:** Appears when content can be scrolled to the right (opacity: 0 when at end)
- **Responsive:** Shadows automatically update as user scrolls or content changes
- **Overscroll handling:** Shadows properly handle browser overscroll behavior

### Resize Handling

The component automatically adapts to size changes:
- **Window resize listener:** Listens to window resize events
- **Debounced update:** Waits 300ms after resize before recalculating dimensions
- **Dimension recalculation:** Updates scroll width, container width, and scroll position
- **Resize event:** Emits `resized` event after recalculation completes
- **Border correction:** Ensures scroll position stays within valid bounds after resize

### Programmatic Scrolling

Use the `scrollTo` method to scroll to specific child elements:

```javascript
// Scroll to a specific element
this.$refs.slider.scrollTo(this.$refs.targetElement)
```

**How it works:**
- Calculates the cumulative width of all child elements before the target
- Includes margins and borders in width calculation
- Scrolls to position the target element at the start of the visible area
- Respects scroll boundaries (won't scroll beyond max scroll position)

### Dimension Calculation

The component calculates child element dimensions including:
- **scrollWidth:** Full content width including overflow
- **margins:** Left and right margins
- **borders:** Left and right borders
- Uses `getComputedStyle` for accurate measurements

### Mouse Move State

- **movedByMouse flag:** Tracks whether scrolling is currently controlled by mouse/touch
- **Event listeners:** Dynamically adds/removes mousemove and mouseup listeners
- **Performance:** Only active during drag operations to minimize overhead
- **Clean up:** Properly removes listeners on component destroy

### Touch Support

- **Touch events:** Fully supports touch gestures on mobile devices
- **pageX detection:** Automatically detects touch coordinates from touch events
- **Native mobile scroll:** Works seamlessly with native mobile scrolling behavior

### Gap Spacing

The component includes a built-in `gap` prop for spacing between items:
- **Supported values:** 1, 2, 3, 4, 5, 6, 8 (maps to Tailwind gap classes)
- **Default:** 0 (no gap)
- **Usage:** `:gap="4"` applies `gap-4` class to the scroller
- Eliminates need for wrapper flex containers with gap classes

### Content Requirements

For proper functionality:
- Items should have `flex-shrink-0` class to prevent shrinking
- Total content width should exceed container width to enable scrolling
- Use the `gap` prop for spacing between items instead of manual flex wrappers

### Structure

```
<div class="aw-slider">
  <span class="aw-slider__scroller">
    <slot /> <!-- Your scrollable content -->
  </span>
  <span class="aw-slider__shadow aw-slider__shadow_left" />
  <span class="aw-slider__shadow aw-slider__shadow_right" />
</div>
```

## Related Components

- `AwFlow` - Flow layout component
- `AwGrid` - Grid layout component

## Notes

- **Import Method:** Global - Available as atom component
- Supports mouse and touch drag gestures
- Shows shadow indicators when content is scrollable
- Prevents click events during drag operations
- Automatically handles resize events
- Use `scrollTo(element)` method to programmatically scroll to a child element
- Click threshold: 300ms or 5px movement to detect drag vs click