Formatter Function

[iomariani]

This change adds the ability to format the value displayed on the slider through the function "formatter", instead of only appending to it with the prop "text-fixed".

I needed this functionality on a project so I could use the slider as a slider range for time HH:mm, thought this would be useful to someone else as well.

Example hours:minutes

<template>
  <div>
    <vs-slider :min="0" :max="24" :step="0.5" stepDecimals :formatter="timingFormatter" v-model="timing" />

    <p>{{ formatter(timing[0]) }} - {{formatter(timing[1])}}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      timing: [0, 24]
    }
  },
  methods: {
    timingFormatter(value) {
      const hours = parseInt(value)
      const minutes = Math.round((value - hours) * 60)

      if (hours === 24) {
        return '23:59'
      } else {
        return hours.toString().padStart(2, '0') + ':' + minutes.toString().padStart(2, '0')
      }
    }
  }
}
</script>