---
name: Drag
route: /components/common/controls/control-drag
menu: Controls
edit: false
---

import { Playground, Props } from 'docz'
import ControlDrag from './control-drag'

# ControlDrag
**SUBCATEGORY:** Controls

<hr />

## Drag
### Description
For manipulating the position of media or content, either by peripheral input or drag gesture.

<Playground>
  <ControlDrag />
</Playground>

**Disabled**
<Playground>
  <ControlDrag disabled />
</Playground>

<hr />

## Drag (inverse)
### Description
For manipulating the position of media or content, either by peripheral input or drag gesture.

<Playground style={{ backgroundColor: '#333', margin: '-2em', padding: '2em' }}>
  <ControlDrag inverse />
</Playground>

**Disabled**
<Playground style={{ backgroundColor: '#333', margin: '-2em', padding: '2em' }}>
  <ControlDrag inverse disabled />
</Playground>

<hr />

## Drag (horizontal)
### Description
For manipulating the position of media or content, either by peripheral input or drag gesture.

<Playground>
  <ControlDrag horizontal />
</Playground>

<Playground>
  <ControlDrag horizontal disabled />
</Playground>

<hr />

## Drag (horizontal, inverse)
### Description
For manipulating the position of media or content, either by peripheral input or drag gesture.

<Playground style={{ backgroundColor: '#333', margin: '-2em', padding: '2em' }}>
  <ControlDrag horizontal inverse />
</Playground>

**Disabled**
<Playground style={{ backgroundColor: '#333', margin: '-2em', padding: '2em' }}>
  <ControlDrag horizontal inverse disabled />
</Playground>

<hr />

## Properties
<Props of={ControlDrag} />