input type="range"で入力量の塗りつぶしを自作する

はじめに

<input type="range">をカスタマイズする時に-webkit-appearance: none;を適用すると、デフォルトではあった入力量の部分が塗りつぶされなくなるので、今回Vueを使ってこれを解決しました。（jQueryでもJavascriptでもできます）

結論からいうと、linear-gradient(to right,color x%,color x%)を使って解決しました。バーの入力量を取得して、全体の何%かをVueで計算してbackgroundプロパティに適応することで、実現することができました。

次にコードとcodepenによるデモを載せます。

コードとデモ

html

<div id="app">
  <div class="rgb">
    <div class="rgbtext">
      <label for="red">red</label>
      <label for="red">{{ red }}</label>
    </div>
    <input id="red" type="range" min="0" max="255" v-model="red" :style="{background: redBar}">
  </div>
</div>

css(SCSS)

body{
  margin: 0;
}

.rgb{
  .rgbtext{
    width: 400px;
    margin: 20px 0 10px 0;
    display: flex;
    justify-content: space-between;
  }
  input[type=range]{
    width: 400px;
    height: 10px;
    border-radius: 30px;
    box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2);
    // 選択表示の枠を消す
    outline: 0;
    // ブラウザによる描画を外す
    appearance: none;
    -webkit-appearance: none;
    // ボタンの設定
    &::-webkit-slider-thumb{
      -webkit-appearance: none;
      appearance: none;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      border: 2px solid  #707070;
      background-color: #fff;
      box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2);
    }
  }
}

javascript(Vue)

let app = new Vue({
  el: "#app",
  data: {
      red: 100,
  },
  computed: {
      redBar: function() {
          let percent = this.red*100/255;
          return `linear-gradient(to right,red `+ percent +`%,#fff `+ percent +`%)`;
      },
  }
})

codepen

See the Pen zYNrXwq by 野原直人 (@Nnohara) on CodePen.

参考

CSS3 グラデーション（gradient）の指定⽅法 | CSS Lecture
HTML5 Range (progress bar) - JSFiddle - Code Playground
input type=range タグをカスタマイズするために | g200kg Music & Software