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-if="request.threshold" v-for="request in myList">
            	{{request.name}}
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>

JavaScript

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