使用滑块来实现div的不透明度

Question

I'm having a bit of trouble having a slider change the opacity value of my div. Here is a fiddle of what I've been working with: https://jsfiddle.net/yfmLk1ad/1/

 $('#bgopacity').on('slide', function(value) { $('.background-color').css({ opacity: value * '.01' }); }); 

 .background-color { width: 500px; height: 500px; background: red; opacity: .5; } 

 <div class="background-color"></div> <form> <label>Color Opacity</label> <input type="range" name="bgopacity" id="bgopacity" value="50" min="0" max="100" step="1" onchange="rangevalue.value=value"> <output id="rangevalue">50</output> </form> 

Answer 1

You have to make use of change event. And to take the value of the slider like this ($(this).val() , not passing as parameter. This update the rectangle when you finished to choose the value.

 // Opacity Slider $('#bgopacity').on('change', function (value) { $('.background-color').css({ opacity: $(this).val() * '.01' }); }); 

 .background-color { width: 500px; height: 500px; background: red; opacity: .5; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form> <label>Color Opacity</label> <input type="range" name="bgopacity" id="bgopacity" value="50" min="0" max="100" step="1" onchange="rangevalue.value=value"> <output id="rangevalue">50</output> </form> <div class="background-color"></div> 

---

For real time update you can use input event. This is updated when the value is changing.

 // Opacity Slider $('#bgopacity').on('input', function (value) { $('.background-color').css({ opacity: $(this).val() * '.01' }); }); 

 .background-color { width: 500px; height: 500px; background: red; opacity: .5; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form> <label>Color Opacity</label> <input type="range" name="bgopacity" id="bgopacity" value="50" min="0" max="100" step="1" onchange="rangevalue.value=value"> <output id="rangevalue">50</output> </form> <div class="background-color"></div> 

Answer 2

First, replace

$('#bgopacity').on('slide', function (){...});

with

$('#bgopacity').on('change', function (){..});  

Instead of value use $(this).val()

See it working