3 vue sliders, total = 100

by firegroove

HTML

<script src="https://nightcatsama.github.io/vue-slider-component/dist/index.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>
<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <title>Range Slider Vue- NightCatSama</title>
    <!--   <link rel="stylesheet" href="css/style.css">
   -->
  </head>

  <body>
    <div id="app">
      <!-- default props -->
      <div class="test-slider">
        <vue-slider ref="slider1" v-model="sliders.slider1" event-type="auto" width="auto" :height="8" :dot-size="16" :min="0" :max="100" :interval="1" :show="true" :speed="0.5" :disabled="false" :piecewise="false" :piecewise-style="false" :tooltip="false" tooltip-dir="top"
          :reverse="false" :data="null" :clickable="true" :real-time="false" :lazy="false" :formatter="null" :bg-style="null" :slider-style="null" :process-style="null" :piecewise-active-style="null" :piecewise-style="null" :tooltip-style="null" :label-style="null"
          :label-active-style="null" @callback="sumRange"></vue-slider>
        <vue-slider ref="slider2" v-model="sliders.slider2" event-type="auto" width="auto" :height="8" :dot-size="16" :min="0" :max="100" :interval="1" :show="true" :speed="0.5" :disabled="false" :piecewise="false" :piecewise-style="false" :tooltip="false" tooltip-dir="top"
          :reverse="false" :data="null" :clickable="true" :real-time="false" :lazy="false" :formatter="null" :bg-style="null" :slider-style="null" :process-style="null" :piecewise-active-style="null" :piecewise-style="null" :tooltip-style="null" :label-style="null"
          :label-active-style="null" @callback="sumRange"></vue-slider>
        <vue-slider ref="slider3" v-model="sliders.slider3" event-type="auto" width="auto" :height="8" :dot-size="16" :min="0" :max="100" :interval="1" :show="true" :speed="0.5" :disabled="false" :piecewise="false" :piecewise-style="false" :tooltip="false" tooltip-dir="top"
          :reverse="false" :data="null"...

CSS

#app {
  margin: 50px;
  width: 950px;
  margin: 30px auto;
}

.inputs {
  width: 5%;
  margin: 0 10px;
}

input {
  width: 100%;
  margin: 10px 10px;
}

.test-slider {
  margin: 0 10px;
  width: 50%;
}

JavaScript

new Vue({
  el: '#app',
  data: function() {
    return {
      limit: Math.trunc(100 / 3),
      sliders: {
        slider1: 33,
        slider2: 33,
        slider3: 33,
      },
      total: 0,
      maxVal: 100,
      delta: "",
      
    }
  },
  watch: {
    "sliders.slider1": function(val) {
      if (val == 100) {
        this.sliders.slider3 = 0
        this.sliders.slider2 = 0
      }
    },
    "sliders.slider2": function(val) {
      if (val == 100) {
        this.sliders.slider1 = 0
        this.sliders.slider3 = 0
      }
    },
    "sliders.slider3": function(val) {
      if (val == 100) {
        this.sliders.slider1 = 0
        this.sliders.slider2 = 0
      }
    }
  },
  methods: {
    sumRange() {
      this.total = 0

      for (number in this.sliders) {
        this.total += parseInt(this.sliders[number])
      }

      for (number in this.sliders) {
        if (this.sliders[number] != this.total) {
          this.sliders[number] = Math.trunc((this.sliders[number] / this.total).toFixed(4) * 100)
        }
      }
    }
  },
  mounted() {
    this.sliders.slider1 = this.limit
    this.sliders.slider2 = this.limit
    this.sliders.slider3 = this.limit
  },
  components: {
    'vueSlider': window['vue-slider-component'],
  }
})