Vue vue-slider-component

by kabanoki

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vue-slider-component@latest/theme/default.css">
<script src="https://cdn.jsdelivr.net/npm/vue-slider-component@latest/dist/vue-slider-component.umd.min.js"></script>
<div id="app">
  <p>
  width: {{getWidth}}
  </p>
  <div>
    <vue-slider
      ref="slider"
      v-model="divWidth"
    ></vue-slider>
  </div>
  <p :style="{'word-break': 'break-all','width': getWidth}">
      私も時間とうていその独立通りという点の限りになっなけれた。もちろん昔が専攻隊はとにかくその創設ないたいだけをきまっておいますとは＃「投げ出したですが、まだには定めるないらしくますな。引込とするない事はまあ昔からけっしてたたた。ちょうど張さんの買収道これから卒業にできです善悪この権利私か周旋をといったご実在ませですですなくて、その場合は私か安危慣例でして、槙さんの事に基礎の私がいやしくも同拡張と好まて私責任をご経験にありようにやはりお奔走に思いななて、現にとうとう相違をやるうてならで訳にしたた。つまりすなわちお兄にいけのはまだ大変とあるたけれども、この監獄をはしだてという金銭をさがしまっんまし。
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

Vue

const vueSlider = window[ 'vue-slider-component' ];

let app = new Vue({
  el: '#app',
  components: {
    'vueSlider': vueSlider,
  },
  data: {
    divWidth:100
  },
  computed: {
    getWidth: function(){
      return this.divWidth + '%';
    }
  }
});