[Vue] スライダーで割合を調整するUIを作成する

サンプル

各要素(数は増減あり)の割合を調整するUIが欲しかったので、vue-slider-component を使用して作成してみました。
スライダーの中にあるドット(点)を操作することで各 item の割合を調整できます。

See the Pen vue-slider-component multiple dots by e-q (@e-q) on CodePen.

バインドしている dots の要素を増やすと点が増えます。
processFunc で返す配列が、各バーの始点・終点です。processFunc の引数には点の位置が配列で入ってきます。
参考 : https://nightcatsama.github.io/vue-slider-component/#/api/props?hash=process

tooltip

codepen でうまくできなかったので省いていますが、下記のように書くことで各要素の値を tooltip で表示することもできます。
参考：https://nightcatsama.github.io/vue-slider-component/#/advanced/components-slots?hash=process-slot

App.vue

<template>
  <main id="app"
      <vue-slider ref="slider" v-model="dots" tooltip="none" :process="processFunc" :enable-cross="false">
        <template v-slot:process="{ start, end, style, index }">
          <div class="vue-slider-process" :style="style">
            <div :class="[
              'merge-tooltip',
              'vue-slider-dot-tooltip-inner',
              'vue-slider-dot-tooltip-inner-top',
            ]">
              {{ getRaito(index) }}
            </div>
          </div>
        </template>
      </vue-slider>
  </main>
</template>
<style>
  .merge-tooltip {
    position: absolute;
    left: 50%;
    bottom: 100%;
    transform: translate(-50%, -15px);
  }
</style>