javascript - How can I gradate between two colors using CSS/JS on a range slider?

Question

As you can see the switch on colors is immediate rather than gradating from red to white to blue. Any suggestions?

function rangeSlider() {

  //get range slider as DOM object
  var rangeSlider = document.getElementById("test1").value;

  //get div "container" as DOM object
  var container1 = document.getElementById("container1");

  if (rangeSlider < 50) {

    $("#container1").css("backgroundColor", "blue");
  } else {

    $("#container1").css("backgroundColor", "red");
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container1" onchange="rangeSlider()">
  <form action="#">
    <div class="range-field">
      <input type="range" id="test1" onchange="rangeSlider()" min="0" max="100" />
    </div>

标签： javascriptcss

Answer 1

一种解决方案是使用颜色的 RGBA 值并计算 alpha（不透明度）。

示例：0 - 49 是蓝色，50 白色，51 - 100 是红色。

function rangeSlider() {

  //get range slider as DOM object
  var rangeSlider = document.getElementById("test1").value;

  //get div "container" as DOM object
  var container1 = document.getElementById("container1");

  if (rangeSlider < 50) {

    $("#container1").css("backgroundColor", "rgba(0,0,255," + ( 1 -rangeSlider / 50 ) + ")");
  } else {

    $("#container1").css("backgroundColor", "rgba(255,0,0," + ( rangeSlider - 50 ) / 50 + ")");
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container1" onchange="rangeSlider()">
  <form action="#">
    <div class="range-field">
      <input type="range" id="test1" oninput="rangeSlider()" min="0" max="100" />
    </div>