transparency range slider

index.html

<div class="wrapper">
  <img src="http://placekitten.com/999/500" alt="" />
  <div class="slider-wrapper">
  <label for="opacity-slider">Opacity</label>
  <input type="range" min="0" max="1" value="1" id="opacity-slider" step="0.01">
    <output for="opacity-slider" id="slider-value">1</output>
    </div>
</div>

script.js

$('#opacity-slider').on("change mousemove", function() {
  $('#slider-value').html($(this).val());
  $('.wrapper img').css({
    'opacity': $(this).val()
  });
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

body {
  margin: 0;
  /*background: url(http://placekitten.com/999/500) no-repeat;*/
  background-size: cover;
  
}

.wrapper img {
  position: absolute;
  width: 100%;
  box-sizing: border-box;
}

.wrapper .slider-wrapper {
  position: fixed;
  top:0;
  left: 0;
  box-shadow: 1px 3px 10px rgba(10, 10, 10, 0.5);
  border: 0.07rem solid rgb(100,100,100);
  background: rgba(30,30,30,0.85);
  padding: 7px 15px 8px;
  border-radius: 0 0 10px;
  color: #ddd;
}
output {
  display: inline-block;
  width:25px;}

transparency-range-slider.markdown

transparency range slider

using a slider as a cross fader to adjust the opacity of an image

Forked from keit's Pen transparency range slider.

A Pen by Simon Gooder on CodePen.

License.