Affective Slider Vue

A Vue 3 component implementation of the Affective Slider (AS) for measuring pleasure and arousal in emotion assessment.

Live Demo | npm Package

About

The Affective Slider (AS) is a digital scale for the self-assessment of emotion composed of two slider controls that measure:

• Pleasure (sad - happy)
• Arousal (sleepy - wide awake)

This component is based on the original Affective Slider by Alberto Betella and Paul F.M.J. Verschure.

The AS has been empirically validated and presented in the following open access scientific publication:

Alberto Betella and Paul F.M.J. Verschure, "The Affective Slider: A Digital Self-Assessment Scale for the Measurement of Human Emotions", PLoS ONE, vol. 11, p. e0148037, 2016. DOI: 10.1371/journal.pone.0148037

Installation

npm install @konbraphat51/affectiveslidervue

The CSS is automatically injected when you import the component, so no additional setup is needed!

Usage

You may like to see Demo implementation for live example.

Basic Usage

<template>
  <div>
    <AffectiveSlider
      @update:pleasureValue="handlePleasureChange"
      @update:arousalValue="handleArousalChange"
      @change="handleChange"
    />
  </div>
</template>

<script>
import AffectiveSlider from 'affectiveslidervue'

export default {
  components: {
    AffectiveSlider
  },
  methods: {
    handlePleasureChange(value) {
      console.log('Pleasure:', value)
    },
    handleArousalChange(value) {
      console.log('Arousal:', value)
    },
    handleChange(values) {
      console.log('Both values:', values)
    }
  }
}
</script>

With v-model

<template>
  <AffectiveSlider
    :pleasure-value="pleasure"
    :arousal-value="arousal"
    @update:pleasureValue="pleasure = $event"
    @update:arousalValue="arousal = $event"
  />
</template>

<script>
export default {
  data() {
    return {
      pleasure: 0.5,
      arousal: 0.5
    }
  }
}
</script>

With Labels

<template>
  <AffectiveSlider
    pleasure-left-label="Sad"
    pleasure-right-label="Happy"
    arousal-left-label="Sleepy"
    arousal-right-label="Awake"
  />
</template>

<script>
import AffectiveSlider from 'affectiveslidervue'

export default {
  components: {
    AffectiveSlider
  }
}
</script>

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | pleasureValue | Number | 0.5 | Initial value for pleasure slider (0-1) | | arousalValue | Number | 0.5 | Initial value for arousal slider (0-1) | | randomizeOrder | Boolean | true | Randomize the order of sliders to prevent bias | | imagePath | String | '/images/' | Base path for slider images | | pleasureLeftLabel | String | '' | Text label below left icon (sad face) of pleasure slider | | pleasureRightLabel | String | '' | Text label below right icon (happy face) of pleasure slider | | arousalLeftLabel | String | '' | Text label below left icon (sleepy face) of arousal slider | | arousalRightLabel | String | '' | Text label below right icon (awake face) of arousal slider |

Events

| Event | Payload | Description | |-------|---------|-------------| | update:pleasureValue | Number | Emitted when pleasure value changes | | update:arousalValue | Number | Emitted when arousal value changes | | change | { pleasure: Number, arousal: Number } | Emitted when any value changes | | interacted | { type: String, pleasure: Number, arousal: Number } | Emitted on first interaction with each slider |

License

CC-BY-SA-4.0 - Same as the original Affective Slider

Credits

Original Affective Slider by Alberto Betella and Paul F.M.J. Verschure

Vue component implementation: This project