<div class="info">
  <p>У цьому прикладі, Ви можете змінювати значення для властивості <strong>opacity</strong>.</p>
</div>

<main>
  Перетягуй повзунок, щоб вибрати ступінь прозорості: <br><input type="range" class="input" id="input" value="50"> <span id="val">0.5</span>

  <img src="https://lorempixel.com/350/250/" alt="example" id="ex">
</main>

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  font-family: sans-serif;
  font-size: 18px;
  line-height: 1.45;
}

.input {
  position: relative;
  top: 2px;
}

.info {
  background-color: #ccc;
  padding: 16px;
  margin-bottom: 36px;
}

main {
  padding: 16px;
}

#ex {
  display: block;
  margin: 36px auto 0 auto;
  opacity: 0.5;
}

$('#input').on('change', function() {
  var newVal = $('#input').val()/100;
  $('#ex').css('opacity', newVal);
  $('#val').html(newVal);
});