<div class="container-fluid">
  <div class="row">
    <div class="col-4">
        <img id="original" src="https://img.favpng.com/8/19/3/vin-diesel-riddick-celebrity-png-favpng-SNpaVfr14HaskV5MBs2mtgwJC.jpg" alt="Original">
    </div>
    <div class="col-4">
      <img id="altered-img" src="https://img.favpng.com/8/19/3/vin-diesel-riddick-celebrity-png-favpng-SNpaVfr14HaskV5MBs2mtgwJC.jpg" alt="Altered">
    </div>
    <div class="col-4">
      <form action="" disabled>
        <h2>Image Settings</h2>

        <div class="form-group">
          <label for="contrast"> Contrast </label>
          <input type="range" class="form-control-range" name="contrast" value="10">
        </div>
        <div class="form-group">
          
        </div>
        <div class="form-group">
          <label for="grayscale"> GrayScale </label>
          <input type="range" class="form-control-range" name="grayscale" value="90">
        </div>

      </form>
    </div>
  </div>

</div>

img {
  width: 300px;
  mix-blend-mode: darken;
}

.row {
  background: yellow;
}
body {
  background : white;
}

$(document).ready(function(){
  
  $("input").on('change', function(){

  let grayscale_val = $("input[name='grayscale']").val()+"%";
  let contrast_val = $("input[name='contrast']").val()+"";
  $("img#altered-img").css("filter", "grayscale("+grayscale_val+") contrast("+contrast_val+")");
});
  $("input").trigger("change");
});