Vue.js(10) Color-change slider

Published on https://techracho.bpsinc.jp/

HTML

<script src="https://unpkg.com/vue@2.3.4"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="app">
  <div class="form-horizontal">
    <div class="form-group">
      <label class="col-md-2 control-label">色</label>
      <div class="col-md-10">
        <input class="form-control" v-model="c" :style="{backgroundColor: c}" />
        <div class="help-block">
          <input type="range" min="0" max="360" v-model.number="num" />
           <ul class="ml-thumbs">
              <li v-for="request in requests">
            	{{request.name}}
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>

JavaScript

var vm = new Vue({
   el: "#app",
   data: {
     requests: 	[
     							{value: 10, name: "foo"},
     							{value: 12, name: "bar"},
                  {value: 14, name: "foobar"},
                  {value: 22, name: "test"},
                  {value: 1, name: "testtooo"},
                  {value: 8, name: "something"}
                  
     					 	], 
     num: 10
   },
   computed: {
     c: function() {
       return `Slider Number: (${this.num})`
     },
   },
 });