Cacher is the code snippet organizer for pro developers

<template>
    <div class="form-group col-md-12">
        <div class="row">
            <div class="col-md-4">
                <multiselect v-model="selectedItem" :options="options"></multiselect>
            </div>
        </div>
        <hr>

        <div class="row ">
            <div class="pull-left"
                 v-for="(item, index) of value"
                 :style="{width: item.rangeOption.width }"
            >
                <h4 class="text-center" style="cursor: pointer" @dblclick="deleteItem(index)">{{item.name}}</h4>
                <vue-slider
                    v-model="item.value"
                    :interval="10"
                    :speed="0"
                    :height="10"
                    :dotSize="40"
                    :min="0"
                    :widht="'100%'"
                    :max="item.rangeOption.max"
                ></vue-slider>
            </div>

        </div>
    </div>
</template>

<script>
  import Multiselect from 'vue-multiselect'
  import vueSlider from 'vue-slider-component';

  export default {
    components: {Multiselect, vueSlider},
    props: {
      config: {
        type: Array,
        default() {
          return []
        },
      },
      options: {
        type: Array,
        default() {
          return []
        },
      },
      value: {
        type: Array,
        default() {
          return []
        },
      }
    },
    data () {
      return {
        selectedItem: [],
        selectedRange:[],
        rangeOptions: []
      }
    },
    methods: {
      deleteItem(index){
        this.value.splice(index, 1);
        this.rangeOptions.max = Math.round(100 / this.value.length );
      }
    },
    computed: {
      currentPercent(){
        let sum = 0;
        this.value.map(item => sum = sum + parseInt(item.value));
        return sum;
      },
      width(){
        return (100 - this.valuesSum) + "%";
      },
      valuesSum(){
        var sum = 0;
        let obj = this.value;
        for( var el in obj ) {
          if( obj.hasOwnProperty( el ) ) {
            sum += parseFloat( obj[el].value );
          }
        }
        return sum;
      }
    },
    watch: {
      selectedItem: function (val) {

        if (!val) {
          return;
        }

        if(this.valuesSum == 100){
          return;
        }

        let item = this.value.find(e => {
          return e.name === val;
        });

        if (!item) {

          let obj = {
            name: val,
            value: 0,
            rangeOption:{
              max: 100 - this.valuesSum,
              width: 100 - this.valuesSum + "%",
            }
          };

          if (this.value.length > 0) {
            let element = this.value[this.value.length - 1];
            element.rangeOption.max = element.value;
            element.rangeOption.width = element.value + "%";
          }

          this.value.push(obj);
          this.rangeOptions.max = Math.round(100 / this.value.length );
        }
      },

    }
  }
</script>

<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>
<style>
    .multiselect{
        z-index: 10;
    }
</style>