CODEWITHSUNDEEP
jquerycssslider
mark-in-motion
mark-in-motion

Reputation: 293

How to change value of style using a slider in jQuery

I have a slider that changes its value in jQuery. How can I use this slider to change the value of the style in my width so that the width of the div will correspond to the value of the slider. I have set my css to change the width to the value of the slider but it doesn't work.

I have my codes like this:

<div class="slidecontainer">
<input type="range" min="1" max="100" value="50" class="slider" id="myRange">
<p>Value: <span id="demo"></span></p>
</div>
<div id="changecss" style="width: 50%;">Change WIDTH</div>

and jQUery

var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
var changecss = document.getElementById("changecss");

var a;

output.innerHTML = slider.value;

slider.oninput = function() {
  output.innerHTML = this.value;
  
  a = this.value;

  $("#changecss").css("width", a);
}

CodePen

Upvotes: 1

Views: 66

Answers (1)

Hirak Sheth
Hirak Sheth

Reputation: 359

Please see below code which will work.

<div class="slidecontainer">
<input type="range" min="1" max="100" value="50" class="slider" id="myRange">
<p>Value: <span id="demo"></span></p>
</div>
<div id="changecss" style="width: 50%;background-color:blue;">Change WIDTH</div>
<script
  src="https://code.jquery.com/jquery-3.6.0.min.js"
  integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
  crossorigin="anonymous"></script>
<script>
var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
var changecss = document.getElementById("changecss");

var a;

output.innerHTML = slider.value;

slider.oninput = function() {
  output.innerHTML = this.value;
  
  a = this.value;

  $("#changecss").css("width", a+"%");
}
</script>

Upvotes: 1

Related Questions