QSlider with configurable home position / origin

[aknoerig]

I had the need for a slider that has a configurable "home" position. Imagine a slider that starts at 0 value, and can be dragged to a negative or a positive side.
While this is technically possible by setting e.g. min=-1, max=1, value=0, the visual feedback is misleading: the colored track is always starting from the left side.

So I created a component that inherits from QSlider and offers an additional home property. This effectively sets the origin of the track bar. Please see code below.

Maybe this could be incorporated into QSlider?

<template>
  <div class="plusminus-slider">
    <q-slider 
      v-model="value"
      @change="this.$emit('change', value)"
      :min="min"
      :max="max"
      :step="step"
    />
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'PlusminusSlider',

  components: {
  },

  emits: [
    'update:modelValue',
    'change'
  ],

  props: {
    modelValue: {
      type: Number,
      required: true
    },
    min: {
      type: Number,
      default: -1
    },
    max: {
      type: Number,
      default: 1
    },
    home: {
      type: Number,
      default: 0
    },
    step: {
      type: Number,
      default: 0
    },
  },

  data () {
    return {
    }
  },
  
  computed: {

    value: {
      get():number {
        return this.modelValue
      },
      set(value:number) {
        this.$emit('update:modelValue', value)
      }
    },

    trackStartLeft():string {
      if (this.value >= this.home) {
        const right = this.homePos * 100
        return `${right}%`
      } else {
        return 'unset'
      }
    },

    trackStartRight():string {
      if (this.value < this.home) {
        const right = 100 - this.homePos * 100
        return `${right}%`
      } else {
        return 'unset'
      }
    },

    trackWidth():string {
      let share=0, pos=0
      if (this.value >= this.home) {
        share = Math.abs(this.max - this.home) / this.range
        pos = Math.abs( (this.value - this.home) / (this.max - this.home ))
      } else {
        share = Math.abs(this.home - this.min) / this.range
        pos = Math.abs( (this.value - this.home) / (this.min -  this.home) )
      }
      return `${pos * share * 100}%`
    },

    homePos():number {
      return Math.abs(this.home - this.min) / this.range
    },

    range():number {
      return Math.abs(this.max - this.min)
    }
  },

  setup() {
    return {
    }
  },

})
</script>

<style lang="sass">
.plusminus-slider
  .q-slider

    &__track-container
      &::before
        content: ''
        width: 2px
        height: 10px
        background-color: rgba(#fff, .3)
        position: absolute
        left: v-bind(trackStartLeft) !important
        right: v-bind(trackStartRight) !important
        top: -4px

    &__track
      left: v-bind(trackStartLeft) !important
      right: v-bind(trackStartRight) !important
      width: v-bind(trackWidth) !important
</style>