CODEWITHSUNDEEP
javascripthtmlcssinputrange
Tane
Tane

Reputation: 491

Change div-element according to input element range

I created this simple input range (with value from 0 to 100) and a div-element(#boxColor). What I would like to achieve, is that when I drag the input range slider to the left (below value 33), box changes color to green. Also, if I drag the input range slider to the right (above 66), The color of the box should change to red. Between values 34-65 box should remain blue. Would anyone here know how to achieve this?

function myFunction() {
var x = document.getElementById("myRange").value;
if (x = "50") {
document.getElementById("text").innerHTML = "new";
}
}
#boxColor {
width: 100px; height: 100px; background: blue; margin-top: 20px;
}
<div class="slidecontainer">
<p>Custom range slider:</p>
<input type="range" min="1" max="100" value="50" class="slider" id="myRange">
</div>  
    
<div id="boxColor"></div>

Upvotes: 2

Views: 955

Answers (4)

Thet Aung
Thet Aung

Reputation: 505

All the above answers are perfectly fine. But I improved them slightly , so that, you can style the box more freely based on the value change.

function handleChange(event) {
  const { value } = event.target;
  const box = document.querySelector('.boxColor');
  
  if(value <= 33) {
    box.classList.add('boxColor--green');
  }else {
    box.classList.remove('boxColor--green');
  }
  
  if(value > 33 && value <= 65) {
    box.classList.add('boxColor--blue');
  }else {
    box.classList.remove('boxColor--blue');
  }
  
  if(value > 65) {
    box.classList.add('boxColor--red');
  }else {
   box.classList.remove('boxColor--red')
  }
  
}
.boxColor {
  width: 100px; height: 100px; background: blue; margin-top: 20px;
}

.boxColor--green {
  background-color: green;
}

.boxColor--red {
  background-color: red;
}

.boxColor--blue {
  background-color: blue;
}
<div class="slidecontainer">
 <p>Custom range slider:</p>
 <input type="range" min="1" max="100" value="50" class="slider" id="myRange"
       oninput="handleChange(event)">
</div>  

<div class="boxColor"></div>

I hope this is helpful.

Upvotes: 0

timber535
timber535

Reputation: 435

You had a few issues there I cannot explain them all but there is a value missing, also logging innerHTML will not change the background of your element you have to use style properties for that.

<div class="slidecontainer">
<p>Custom range slider:</p>
<input type="range" min="1" max="100" value="50" id="myRange" step="2">
</div>  
<div id="box"></div>

const slider = document.getElementById('myRange');
slider.addEventListener('input', myFunction);
var box = document.querySelector('#box');

function myFunction() {
let x = this.value;

console.log(x);

box.innerHTML = x;
if(x < 33){
box.style.backgroundColor = 'green';
}
else if(x > 65){
box.style.backgroundColor = 'red';
}
else{
box.style.backgroundColor = 'blue';
 }
}


#box {
width: 100px; 
height: 100px;
background: blue;
margin-top: 20px;
}

See this fiddle: https://jsfiddle.net/dsgqtwko/1/

Upvotes: 1

segFault
segFault

Reputation: 4054

You could use the onchange event handler to call a function that performs the color change based on the current value of the slider. See below for an example:

function handleChange() {

  var x = document.getElementById('myRange').value;
  let color;
  if (x <= 33) {
    color = 'green';
  } else if (x >= 66) {
    color = 'red';
  } else {
    color = 'blue';
  }
  document.getElementById('boxColor').style.backgroundColor = color;
}
#boxColor {
  width: 100px;
  height: 100px;
  background: blue;
  margin-top: 20px;
}
<div class="slidecontainer">
  <label for="myRange">Custom range slider:</label>
  <input 
    type="range" 
    min="1" 
    max="100" 
    value="50" 
    class="slider" 
    id="myRange" 
    onchange="handleChange()" 
  />
</div>

<div id="boxColor"></div>

Upvotes: 2

Andre Nuechter
Andre Nuechter

Reputation: 2255

You can change the style of the box-element by listening to the input-event on the slider-element, like so:

const slider = document.getElementById('myRange');
const box = document.getElementById('boxColor');

slider.oninput = ({ target: { value } }) => {
  if (+value < 33) box.style.background = 'green';
  else if (+value > 66) box.style.background = 'red';
  else box.style.background = 'blue';
}
#boxColor {
width: 100px; height: 100px; background: blue; margin-top: 20px;
}
<div class="slidecontainer">
<p>Custom range slider:</p>
<input type="range" min="1" max="100" value="50" class="slider" id="myRange">
</div>  
    
<div id="boxColor"></div>

Upvotes: 2

Related Questions