Background Color Change Slider with HTML CSS and JavaScript

In this tutorial we will see how to change Background Color with Range Slider using HTML, CSS and JavaScript. We have used input range slider for this with CSS linear-gradient property and JavaScript setProperty method.

Table of Contents

HTML Code

Take a look at the HTML code given below, in this we have a range type input element inside the div with class of container.


<div class="container">

<input type="range" min="0" max="100" value="0" class="slider" id="range">    
    
</div>

CSS Code

CSS code is given below, in this code we have changed appearance of our range slider using simple CSS properties.


<style>
body
{
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background-color: #000;
}
.container
{
    background-color: #fff;
    width: 100%;
    max-width: 250px;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 0px 3px 1px #777;
}
.slider
{
    -webkit-appearance:none;
    appearance:none;
    width: 100%;
    height: 10px;
    max-width: 400px;
    background-color: #ccc;
    margin: 0;
    padding: 0;
    outline: none;
    border-radius: 10px;
    cursor: pointer;
}
</style>

JavaScript Code

Take a look at the JavaScript Code given below, in this code getElementsByTagName() method is used to select body tag and getElementById() method is used to select input range slider.

Then oninput event is attached with input range slider which will trigger a JavaScript function when the value of range slider is changed.

This value is read in real time and percentage of two colors for the CSS linear-gradient is calculated. Variable bg contains complete value of linear-gradient which is dynamic and changes with the value of input range slider.

In simple words this linear-gradient will change when the position of range slider is changed.

The linear-gradient background is then applied to the body of HTML page using .style javascript property and setProperty() method.


<script>
var body = document.getElementsByTagName('BODY')[0];
var sliderValue = document.getElementById('range');

sliderValue.oninput = function()
{

var color1 = this.value;
var color2 = 100-color1;    

var bg = 'linear-gradient(90deg, red, red '+color1+'%, red '+color1+'%, black '+color1+'% , black '+color2+'%)';
    
body.style.setProperty('background', bg);    
    
}
</script>

Demo

Check Demo

Video Tutorial

Watch our video tutorial on Background Color Change Slider with HTML CSS and JavaScript.