# Slider

## visual Slider

Slider stimulus.

## Constructor

#### new Slider(options)

Source:
  - visual/Slider.js, line 31
Mixes In:
  - module:util.ColorMixin
To Do:
  - check that parameters are valid, e.g. ticks are an array of numbers, etc.
  - readOnly
  - complete setters, for instance setTicks should change this._isCategorical
  - flesh out the skin approach

##### Parameters:

Name | Type | Description
--- | --- | ---
`options` | Object | ###### Properties
Name | Type | Attributes | Default | Description
--- | --- | --- | --- | ---
`name` | String |  |  | the name used when logging messages from this stimulus
`win` | module:core.Window |  |  | the associated Window
`pos` | Array.<number> | <optional> | `[0, 0]` | the position of the center of the slider
`size` | Array.<number> |  |  | the size of the slider, e.g. [1, 0.1] for an horizontal slider
`ori` | number | <optional> | `0.0` | the orientation (in degrees)
`units` | string | <optional> | `'height'` | the units of the Slider position, and font size
`color` | Color | <optional> | `Color('LightGray')` | the color of the slider
`contrast` | number | <optional> | `1.0` | the contrast of the slider
`opacity` | number | <optional> | `1.0` | the opacity of the slider
`style` | string | <optional> | `[Slider.Style.RATING]` | the slider style
`ticks` | Array.<number> | <optional> | `[1,2,3,4,5]` | the array of ticks
`labels` | Array.<number> | <optional> | `[]` | the array of labels
`granularity` | number | <optional> | `0` | the granularity
`flip` | boolean | <optional> | `false` | whether or not to flip the position of the marker, ticks, and labels with respect to the central bar
`readOnly` | boolean | <optional> | `false` | whether or not the slider is read only
`font` | string | <optional> | `'Arial'` | the text font
`bold` | boolean | <optional> | `true` | whether or not the font of the labels is bold
`italic` | boolean | <optional> | `false` | whether or not the font of the labels is italic
`fontSize` | number | <optional> |  | the font size of the labels (in pixels), the default fontSize depends on the Slider's units: 14 for 'pix', 0.03 otherwise
`compact` | boolean | <optional> | `false` | whether or not the slider is compact, i.e. whether all graphical elements (e.g. labels) fit within its size
`clipMask` | PIXI.Graphics |  |  | the clip mask
`autoDraw` | boolean | <optional> | `false` | whether or not the stimulus should be automatically drawn on every frame flip
`autoLog` | boolean | <optional> | `false` | whether or not to log
`dependentStims` | Array.<core.MinimalStim> | <optional> | `[]` | the list of dependent stimuli, which must be updated when this Slider is updated, e.g. a Form.

### Extends

- module:visual.VisualStim

### Members

#### (static, readonly) Shape :Symbol

Source:
  - visual/Slider.js, line 1474

##### Properties:

Name | Type | Description
--- | --- | ---
`DISC` | Symbol |
`TRIANGLE` | Symbol |
`LINE` | Symbol |
`BOX` | Symbol |

Shape of the marker and of the ticks.

##### Type:

- Symbol

#### (static, readonly) Skin :any

Source:
  - visual/Slider.js, line 1504

##### Properties:

Name | Type | Description
--- | --- | ---
`MARKER_SIZE` | any |
`STANDARD` | any |
`WHITE_ON_BLACK` | any |

Skin.

##### Type:

- any

#### (static, readonly) Style :Symbol

Source:
  - visual/Slider.js, line 1487

##### Properties:

Name | Type | Description
--- | --- | ---
`RATING` | Symbol |
`TRIANGLE_MARKER` | Symbol |
`SLIDER` | Symbol |
`WHITE_ON_BLACK` | Symbol |
`LABELS_45` | Symbol |
`RADIO` | Symbol |

Styles.

##### Type:

- Symbol

#### borderColor

Source:
  - visual/Slider.js, line 436

Let `borderColor` alias `lineColor` to parallel PsychoPy

#### fillColor

Source:
  - visual/Slider.js, line 457

Let `fillColor` alias `markerColor` to parallel PsychoPy

### Methods

#### (protected) _addEventListeners()

Source:
  - visual/Slider.js, line 884

Add event listeners.

#### (protected) _estimateBoundingBox()

Source:
  - visual/Slider.js, line 486
Overrides:
  - module:visual.VisualStim#_estimateBoundingBox

Estimate the bounding box.

#### (protected) _getBoundingBox_px() → {PIXI.Rectangle}

Source:
  - visual/VisualStim.js, line 234
Overrides:
  - module:visual.VisualStim#_getBoundingBox_px

Get the bounding box in pixel coordinates

##### Returns:

the bounding box, in pixel coordinates

Type
  PIXI.Rectangle

#### (protected) _getPosition_px() → {Array.<number>}

Source:
  - visual/Slider.js, line 765

Estimate the position of the slider, taking the compactness into account.

##### Returns:

- the position of the slider, in pixels

Type
  Array.<number>

#### (protected) _getTextStyle()

Source:
  - visual/Slider.js, line 1175

Get the PIXI Text Style applied to the PIXI.Text labels.

#### (protected) _granularise(rating) → {number}

Source:
  - visual/Slider.js, line 1451

Calculate the rating once granularity has been taken into account.

##### Parameters:

Name | Type | Description
--- | --- | ---
`rating` | number | the input rating

##### Returns:

the new rating with granularity applied

Type
  number

#### (protected) _handlePointerDown()

Source:
  - visual/Slider.js, line 820

Handle pointerdown event.

#### (protected) _handlePointerMove()

Source:
  - visual/Slider.js, line 842

Handle pointermove event.

#### (protected) _handlePointerUp()

Source:
  - visual/Slider.js, line 862

Handle pointerup event.

#### (protected) _isHorizontal() → {boolean}

Source:
  - visual/Slider.js, line 1439

Determine whether the slider is horizontal.

The slider is horizontal is its x-axis size is larger than its y-axis size.

##### Returns:

whether or not the slider is horizontal

Type
  boolean

#### (protected) _onChange(withPixiopt, withBoundingBoxopt) → {function}

Source:
  - visual/VisualStim.js, line 277
Overrides:
  - module:visual.VisualStim#_onChange

Generate a callback that prepares updates to the stimulus. This is typically called in the constructor of a stimulus, when attributes are added with _addAttribute.

##### Parameters:

Name | Type | Attributes | Default | Description
--- | --- | --- | --- | ---
`withPixi` | boolean | <optional> | `false` | whether or not the PIXI representation must also be updated
`withBoundingBox` | boolean | <optional> | `false` | whether or not to immediately estimate the bounding box

##### Returns:

Type
  function

#### (protected) _posToRating(pos_px) → {number}

Source:
  - visual/Slider.js, line 1394

Convert a [x,y] position, in pixel units, relative to the slider, into a rating.

##### Parameters:

Name | Type | Description
--- | --- | ---
`pos_px` | Array.<number> | the [x,y] position, in pixel units, relative to the slider.

##### Returns:

the corresponding rating.

Type
  number

#### (protected) _ratingToPos(ratings) → {Array.<Array.<number>>}

Source:
  - visual/Slider.js, line 1336

Convert an array of ratings into an array of [x,y] positions (in Slider units, with 0 at the center of the Slider)

##### Parameters:

Name | Type | Description
--- | --- | ---
`ratings` | Array.<number> | the array of ratings

##### Returns:

the positions corresponding to the ratings (in Slider units, with 0 at the center of the Slider)

Type
  Array.<Array.<number>>

#### (protected) _removeEventListeners()

Source:
  - visual/Slider.js, line 896

Remove event listeners.

#### (protected) _sanitizeAttributes()

Source:
  - visual/Slider.js, line 615

Sanitize the slider attributes: check for attribute conflicts, missing values, etc.

#### (protected) _setupBar()

Source:
  - visual/Slider.js, line 984

Setup the central bar.

#### (protected) _setupLabels()

Source:
  - visual/Slider.js, line 1194

Setup the labels.

#### (protected) _setupMarker()

Source:
  - visual/Slider.js, line 1011

Setup the marker, and the associated mouse events.

#### (protected) _setupSlider()

Source:
  - visual/Slider.js, line 911

Setup the PIXI components of the slider (bar, ticks, labels, marker, etc.).

#### (protected) _setupStyle()

Source:
  - visual/Slider.js, line 1219

Apply a particular style to the slider.

#### (protected) _setupTicks()

Source:
  - visual/Slider.js, line 1142

Setup the ticks.

#### (protected) _updateIfNeeded()

Source:
  - visual/Slider.js, line 731
Overrides:
  - module:visual.VisualStim#_updateIfNeeded

Update the stimulus, if necessary.

#### contains(object, units) → {boolean}

Source:
  - visual/VisualStim.js, line 196
Overrides:
  - module:visual.VisualStim#contains

Determine whether an object is inside the bounding box of the stimulus.

##### Parameters:

Name | Type | Description
--- | --- | ---
`object` | Object | the object
`units` | string | the units

##### Returns:

whether or not the object is inside the bounding box of the stimulus

Type
  boolean

#### draw()

Source:
  - core/MinimalStim.js, line 81
Overrides:
  - module:visual.VisualStim#draw

Draw this stimulus on the next frame draw.

#### getRating() → {number|undefined}

Source:
  - visual/Slider.js, line 314

Get the current value of the rating.

##### Returns:

the rating or undefined if there is none

Type
  number | undefined

#### getRT() → {number|undefined}

Source:
  - visual/Slider.js, line 332

Get the response time of the most recent change to the rating.

##### Returns:

the response time (in second) or undefined if there is none

Type
  number | undefined

#### hide()

Source:
  - core/MinimalStim.js, line 121
Overrides:
  - module:visual.VisualStim#hide

Hide this stimulus on the next frame draw.

#### isMarkerDragging() → {boolean}

Source:
  - visual/Slider.js, line 304

Query whether or not the marker is currently being dragged.

##### Returns:

whether or not the marker is being dragged

Type
  boolean

#### recordRating(rating, responseTimeopt, logopt)

Source:
  - visual/Slider.js, line 693

Set the current rating.

Setting the rating does also change the visible position of the marker.

##### Parameters:

Name | Type | Attributes | Default | Description
--- | --- | --- | --- | ---
`rating` | number |  |  | the rating
`responseTime` | number | <optional> |  | the reaction time
`log` | boolean | <optional> | `false` | whether of not to log

#### refresh()

Source:
  - visual/Slider.js, line 269
Overrides:
  - module:visual.VisualStim#refresh

Force a refresh of the stimulus.

#### release(logopt)

Source:
  - visual/Slider.js, line 720
Overrides:
  - module:visual.VisualStim#release

Release the PIXI representation, if there is one.

##### Parameters:

Name | Type | Attributes | Default | Description
--- | --- | --- | --- | ---
`log` | boolean | <optional> | `false` | whether or not to log

#### reset()

Source:
  - visual/Slider.js, line 279

Reset the slider.

#### setAutoDraw(autoDraw, logopt)

Source:
  - core/MinimalStim.js, line 62
Overrides:
  - module:visual.VisualStim#setAutoDraw

Setter for the autoDraw attribute.

##### Parameters:

Name | Type | Attributes | Default | Description
--- | --- | --- | --- | ---
`autoDraw` | boolean |  |  | the new value
`log` | boolean | <optional> | `false` | whether to log

#### setDepth(depth, logopt)

Source:
  - visual/VisualStim.js, line 182
Overrides:
  - module:visual.VisualStim#setDepth

Setter for the depth attribute.

##### Parameters:

Name | Type | Attributes | Default | Description
--- | --- | --- | --- | ---
`depth` | Array.<number> |  | `0` | order in which stimuli is rendered, kind of css's z-index with a negative sign.
`log` | boolean | <optional> | `false` | whether of not to log

#### setMarkerPos(displayedRating, logopt)

Source:
  - visual/Slider.js, line 382

Setter for the markerPos attribute.

Setting markerPos changes the visible position of the marker to the specified rating but does not change the actual rating returned by the slider.

##### Parameters:

Name | Type | Attributes | Default | Description
--- | --- | --- | --- | ---
`displayedRating` | number |  |  | the displayed rating
`log` | boolean | <optional> | `false` | whether of not to log

#### setOri(ori, logopt)

Source:
  - visual/Slider.js, line 421
Overrides:
  - module:visual.VisualStim#setOri

Setter for the orientation attribute.

##### Parameters:

Name | Type | Attributes | Default | Description
--- | --- | --- | --- | ---
`ori` | number |  | `0` | the orientation in degree with 0 as the vertical position, positive values rotate clockwise.
`log` | boolean | <optional> | `false` | whether of not to log

#### setPos(pos, logopt)

Source:
  - visual/VisualStim.js, line 161
Overrides:
  - module:visual.VisualStim#setPos

Setter for the position attribute.

##### Parameters:

Name | Type | Attributes | Default | Description
--- | --- | --- | --- | ---
`pos` | Array.<number> |  |  | position of the center of the stimulus, in stimulus units
`log` | boolean | <optional> | `false` | whether of not to log

#### setRating(rating, logopt)

Source:
  - visual/Slider.js, line 403

Setter for the rating attribute.

Setting the rating does not change the visible position of the marker.

##### Parameters:

Name | Type | Attributes | Default | Description
--- | --- | --- | --- | ---
`rating` | number |  |  | the rating
`log` | boolean | <optional> | `false` | whether of not to log

#### setReadOnly(readOnlyopt, logopt)

Source:
  - visual/Slider.js, line 353

Setter for the readOnly attribute.

Read-only sliders are half-opaque and do not provide responses.

##### Parameters:

Name | Type | Attributes | Default | Description
--- | --- | --- | --- | ---
`readOnly` | boolean | <optional> | `true` | whether or not the slider is read-only
`log` | boolean | <optional> | `false` | whether of not to log

#### setSize(size, logopt)

Source:
  - visual/VisualStim.js, line 109
Overrides:
  - module:visual.VisualStim#setSize

Setter for the size attribute.

##### Parameters:

Name | Type | Attributes | Default | Description
--- | --- | --- | --- | ---
`size` | undefined | null | number | Array.<number> |  |  | the stimulus size
`log` | boolean | <optional> | `false` | whether of not to log