## VolumeBar

The bar that contains the volume level and can be clicked on to adjust the level

## Constructor

#### new VolumeBar(player, optionsopt)
`control-bar/volume-control/volume-bar.js`, `line 15`

  Creates an instance of this class.

  ##### Parameters:

  Name | Type | Attributes | Description
  --- | --- | --- | ---
  `player` | Player |  | The `Player` that this class should be attached to.
  `options` | Object | <optional> | The key/value store of player options.

### Extends

- Slider

### Members

#### playerEvent :string
`control-bar/volume-control/volume-bar.js`, `line 161`

  Call the update event for this Slider when this event happens on the player.

### Methods

#### calculateDistance(event) → {number}
`slider/slider.js`, `line 221`

  Calculate distance for slider

  ##### Parameters:

  Name | Type | Description
  --- | --- | ---
  `event` | EventTarget~Event | The event that caused this function to run.

  ##### Returns:

  number -

  The current position of the Slider.

          - postition.x for vertical `Slider`s
          - postition.y for horizontal `Slider`s

  Inherited From:
    - Slider#calculateDistance

#### checkMuted()
`control-bar/volume-control/volume-bar.js`, `line 64`

  If the player is muted unmute it.

#### createEl() → {Element}
`control-bar/volume-control/volume-bar.js`, `line 39`

  Create the `Component`'s DOM element

  ##### Returns:

  Element -

  The element that was created.

  Overrides:
    - Slider#createEl

#### getPercent() → {number}
`control-bar/volume-control/volume-bar.js`, `line 76`

  Get percent of volume level

  ##### Returns:

  number -

  Volume level percent as a decimal number.

#### handleBlur(event)
`slider/slider.js`, `line 274`

  Handle a `blur` event on this `Slider`.

  ##### Parameters:

  Name | Type | Description
  --- | --- | ---
  `event` | EventTarget~Event | The `blur` event that caused this function to run.

  ##### Listens to Events:

  - event:blur
  Inherited From:
    - Slider#handleBlur

#### handleClick(event)
`slider/slider.js`, `line 285`

  Listener for click events on slider, used to prevent clicks from bubbling up to parent elements like button menus.

  ##### Parameters:

  Name | Type | Description
  --- | --- | ---
  `event` | Object | Event that caused this object to run

  Inherited From:
    - Slider#handleClick

#### handleFocus(event)
`slider/slider.js`, `line 238`

  Handle a `focus` event on this `Slider`.

  ##### Parameters:

  Name | Type | Description
  --- | --- | ---
  `event` | EventTarget~Event | The `focus` event that caused this function to run.

  ##### Listens to Events:

  - event:focus
  Inherited From:
    - Slider#handleFocus

#### handleKeyPress(event)
`slider/slider.js`, `line 252`

  Handle a `keydown` event on the `Slider`. Watches for left, rigth, up, and down arrow keys. This function will only be called when the slider has focus. See Slider#handleFocus and Slider#handleBlur.

  ##### Parameters:

  Name | Type | Description
  --- | --- | ---
  `event` | EventTarget~Event | the `keydown` event that caused this function to run.

  ##### Listens to Events:

  - event:keydown
  Inherited From:
    - Slider#handleKeyPress

#### handleMouseDown(event)
`slider/slider.js`, `line 90`

  Handle `mousedown` or `touchstart` events on the `Slider`.

  ##### Parameters:

  Name | Type | Description
  --- | --- | ---
  `event` | EventTarget~Event | `mousedown` or `touchstart` event that triggered this function

  ##### Fires:

  - Slider#event:slideractive

  ##### Listens to Events:

  - event:mousedown
  - event:touchstart
  Inherited From:
    - Slider#handleMouseDown

#### handleMouseMove(event)
`control-bar/volume-control/volume-bar.js`, `line 56`

  Handle movement events on the VolumeMenuButton.

  ##### Parameters:

  Name | Type | Description
  --- | --- | ---
  `event` | EventTarget~Event | The event that caused this function to run.

  ##### Listens to Events:

  - event:mousemove
  Overrides:
    - Slider#handleMouseMove

#### handleMouseUp(event)
`slider/slider.js`, `line 138`

  Handle `mouseup` or `touchend` events on the `Slider`.

  ##### Parameters:

  Name | Type | Description
  --- | --- | ---
  `event` | EventTarget~Event | `mouseup` or `touchend` event that triggered this function.

  ##### Fires:

  - Slider#event:sliderinactive

  ##### Listens to Events:

  - event:touchend
  - event:mouseup
  Inherited From:
    - Slider#handleMouseUp

#### stepBack()
`control-bar/volume-control/volume-bar.js`, `line 94`

  Decrease volume level for keyboard users

#### stepForward()
`control-bar/volume-control/volume-bar.js`, `line 86`

  Increase volume level for keyboard users

#### update() → {number}
`slider/slider.js`, `line 167`

  Update the progress bar of the `Slider`.

  ##### Returns:

  number -

  The percentage of progress the progress bar represents as a number from 0 to 1.

  Inherited From:
    - Slider#update

#### updateARIAAttributes(eventopt)
`control-bar/volume-control/volume-bar.js`, `line 107`

  Update ARIA accessibility attributes

  ##### Parameters:

  Name | Type | Attributes | Description
  --- | --- | --- | ---
  `event` | EventTarget~Event | <optional> | The `volumechange` event that caused this function to run.

  ##### Listens to Events:

  - Player#event:volumechange

#### vertical(boolopt) → {boolean}
`slider/slider.js`, `line 301`

  Get/set if slider is horizontal for vertical

  ##### Parameters:

  Name | Type | Attributes | Description
  --- | --- | --- | ---
  - `bool` | boolean | <optional> | true if slider is vertical,
         - false is horizontal

  ##### Returns:

  boolean -
  - true if slider is vertical, and getting

          - false if the slider is horizontal, and getting

  Inherited From:
    - Slider#vertical

### Events

#### slideractive
`slider/slider.js`, `line 97`

  Triggered when the slider is in an active state

  ##### Type:

  - EventTarget~Event
  Inherited From:
    - Slider#event:slideractive

#### sliderinactive
`slider/slider.js`, `line 144`

  Triggered when the slider is no longer in an active state.

  ##### Type:

  - EventTarget~Event
  Inherited From:
    - Slider#event:sliderinactive