Вот живой пример:

В title и url кладете то что вам нужно, в примере текущая ссылка и заголовок страницы

Используйте для блока заливку с альфа-каналом rgba

<div id="block">
  <p class="text">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel erat eu risus pharetra lacinia. Morbi consectetur urna vitae ornare fringilla.
  </p>
</div>

#block{
  background:rgba(0,0,0,0.5);  /* 0.5 – 50% непрозрачности */
}
.text {
  color:#fff;
}

Пример на CodePen

Все очень просто, берешь свой блок, берешь ползунок.
На ползунок вешаешь обработчик события, либо input, либо change (смотря какой эффект нужен), далее берешь текущее значение с ползунка и присваиваешь нужный стиль блоку.