4

I have already gone through the following questions and none of those have the answer i want :- (So please don't link them and mark this as duplicate).

  1. Using JavaScript to edit CSS gradient
  2. Is there a way to style HTML5's range control?
  3. How to customize the HTML5 input range type looks using CSS?
  4. Change color of input range slider with javascript [duplicate]

I have three sliders like this.

They are RGB sliders for which i have used gradient. In red slider green and blue value is 0. i.e gradient value of red slider : rgb(0,0,0) to rgb(255,0,0).

enter image description here

I want to change the gradient of blue slider and green slider as i slide red slider using javascript. If i change red value to 120. Then in blue slider the gradient must be changed from rgb(old_red_value,0,old_green_value) to rgb(changed_red_value,255,old_green_value)

It is used to define color to a div.

<head>
<style type="text/css">
.slider {
    display: inline;
    -webkit-appearance: none;
    height: 15px;
    border-radius: 5px;
    background: #d3d3d3;
    outline: none;
    -webkit-transition: .2s;
    transition: opacity .2s;
    width: 80%;
    margin-left: 5%;
}
#red_slider{
    background: linear-gradient(to right, rgb(0,0,0) , rgb(255,0,0) );
}
#green_slider{
    background: linear-gradient(to right, rgb(0,0,0) , rgb(0,255,0) );
}
#blue_slider{
    background: linear-gradient(to right, rgb(0,0,0) , rgb(0,0,255) );
}
</style>
</head>
<body>  
<input type="range" min="0" max="255" value="127" class="slider" id="red_slider">
<p>Red: <span id="red_value"></span></p>

<input type="range" min="0" max="255" value="127" class="slider" id="green_slider">
<p>Green: <span id="green_value"></span></p>

<input type="range" min="0" max="255" value="127" class="slider" id="blue_slider">
<p>Blue: <span id="blue_value"></span></p>

<script type="text/javascript">

    var red_slider = document.getElementById("red_slider");
    var green_slider = document.getElementById("green_slider");
    var blue_slider = document.getElementById("blue_slider");

    var red_output = document.getElementById("red_value");
    var green_output = document.getElementById("green_value");
    var blue_output = document.getElementById("blue_value");

    red_output.innerHTML = red_slider.value;
    green_output.innerHTML = green_slider.value;
    blue_output.innerHTML = blue_slider.value;

    var red_val = red_slider.value;
    var green_val = green_slider.value;
    var blue_val = blue_slider.value;

    red_slider.oninput = function() {
        red_output.innerHTML = this.value;
        red_val = this.value;
        disp.style.backgroundColor = "rgb("+red_val+","+green_val+","+blue_val+")";
        rgb_value.innerHTML = "rgb("+red_val+","+green_val+","+blue_val+")";
        // hex_value.innerHTML = "hex("+red_val.toString(16) +","+green_val.toString(16) +","+blue_val.toString(16) +")";

        // blue_slider.style.background = "black";
        // blue_slider.css{
        //  background: linear-gradient(to right, rgb($red_val,0,0) , rgb($red_val,0,255) );
        // }

        // blue_slider.style.background = "linear-gradient(to right, rgb("+red_val+",0,0) , rgb("+red_val+",0,255) );";
    }
    green_slider.oninput = function() {
        green_output.innerHTML = this.value;
        green_val = this.value;
        disp.style.backgroundColor = "rgb("+red_val+","+green_val+","+blue_val+")";
        rgb_value.innerHTML = "rgb("+red_val+","+green_val+","+blue_val+")";
        // hex_value.innerHTML = "rgb("+red_val+","+green_val+","+blue_val+")";
    }
    blue_slider.oninput = function() {
        blue_output.innerHTML = this.value;
        blue_val = this.value;
        disp.style.backgroundColor = "rgb("+red_val+","+green_val+","+blue_val+")";
        rgb_value.innerHTML = "rgb("+red_val+","+green_val+","+blue_val+")";
        // hex_value.innerHTML = "rgb("+red_val+","+green_val+","+blue_val+")";
    }
</script>

I can change it to a fixed colour using js - blue_slider.style.background = "black";, but my question is to change it to a different color gradient using js.

1 Answers1

4

In this case I would consider CSS variables to simplify the code. The idea is to change the color variable using JS and the code will be reduced.

Then you can adjust the gradient color by using the variable in the needed place and using only CSS:

var red_slider = document.getElementById("red_slider");
var green_slider = document.getElementById("green_slider");
var blue_slider = document.getElementById("blue_slider");

var red_output = document.getElementById("red_value");
var green_output = document.getElementById("green_value");
var blue_output = document.getElementById("blue_value");


red_slider.oninput = function() {
  red_output.innerHTML = this.value;
  document.documentElement.style.setProperty('--red-color', this.value);

}
green_slider.oninput = function() {
  green_output.innerHTML = this.value;
  document.documentElement.style.setProperty('--green-color', this.value);

}
blue_slider.oninput = function() {
  blue_output.innerHTML = this.value;
  document.documentElement.style.setProperty('--blue-color', this.value);
}
:root {
 --red-color:127;
 --blue-color:127;
 --green-color:127;
}

.slider {
  display: inline;
  -webkit-appearance: none;
  height: 15px;
  border-radius: 5px;
  background: #d3d3d3;
  outline: none;
  -webkit-transition: .2s;
  transition: opacity .2s;
  width: 80%;
  margin-left: 5%;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #4CAF50;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #4CAF50;
  cursor: pointer;
}

#rgb_value_container {
  /*margin: 16px auto;*/
  text-align: center;
  font-weight: bold;
  font-size: 20px;
}

#red_slider {
  background: linear-gradient(to right, rgb(0, 0, 0), rgb(255, var(--green-color), var(--blue-color)));
}

#green_slider {
  background: linear-gradient(to right, rgb(0, 0, 0), rgb(var(--red-color), 255, var(--blue-color)));
}

#blue_slider {
  background: linear-gradient(to right, rgb(0, 0, 0), rgb(var(--red-color), var(--green-color), 255));
}

#color_box {
  width: 250px;
  height: 250px;
  margin: 30px auto;
  background-color: rgb(var(--red-color), var(--green-color), var(--blue-color));
}
<div id="color_box"></div>


<input type="range" min="0" max="255" value="127" class="slider" id="red_slider">
<p>Red: <span id="red_value">127</span></p>

<input type="range" min="0" max="255" value="127" class="slider" id="green_slider">
<p>Green: <span id="green_value">127</span></p>

<input type="range" min="0" max="255" value="127" class="slider" id="blue_slider">
<p>Blue: <span id="blue_value">127</span></p>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415