0

I have an image with an inline opacity set like so...

<img id="theImage" style="opacity: 0.54;" src="...source..." class="gray-scale-img profileImage img-responsive"/>

I'm using IonRangeSlider to set a new value of the opacity but the issue is that if I go above 0.54 on my range slider the opacity does nothing. It will adjust fine from 0.00 to 0.54, but if I go above this, it just remains at 0.54 and will not get any brighter.

$("#theImage").css({ opacity: opacity });

IonRangeSlider

$("#formElement").ionRangeSlider({
  min: 0,
  max: 100,
  onChange: function(data) {
    var val = data.from;
    if (val < 100) {
      if (val < 10) {
        var opacity = "0.0" + val;
      } else {
        var opacity = "0." + val;
      }
    } else {
      var opacity = "1.0"
    }
    $("#theImage").css({
      opacity: opacity
    });
  },
  onFinish: function() {
    ...
  }
});

Thanks.

2
  • There is no id to that image at all? Mar 4, 2017 at 3:25
  • I adjusted my code for clarity
    – LargeTuna
    Mar 4, 2017 at 3:28

2 Answers 2

1

Why are you using the if else

Determine opacity directly opacity = val/100

EDIT: See the code below you'll get the idea. Also you can look at @gyre 's answer which has similar implementation with IonRangeSlider so i'll let this code remain more general.

$(function(){
      var slider = $("#slider");
      var img = $("#theImage");
  
  slider.change(function(){
      var opacity = (this.value)/100;
      img.css("opacity",opacity);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<input id="slider" type="range" id="myRange" value="54"><br>
<img id="theImage" style="opacity: 0.54;" src="https://placehold.it/350x150">
</div>

0
0

You are doing too many unnecessary calculations and branches with the opacity variable. It looks like you are trying to turn a percent into a decimal. Simply use data.from / 100 as your opacity value.

$("#formElement").ionRangeSlider({
  min: 0,
  from: 54,
  max: 100,
  onChange: function (data) {
    $("#theImage").css('opacity', data.from / 100);
  },
  onFinish: function() {
    // stuff
  }
});
<input id="formElement" type="text" >
<img id="theImage" src="//stackoverflow.com/favicon.ico">

<!-- Resources necessary for the demo to work -->
<link href="http://ionden.com/a/plugins/ion.rangeSlider/static/css/ion.rangeSlider.skinFlat.css" rel="stylesheet"/>
<link href="http://ionden.com/a/plugins/ion.rangeSlider/static/css/ion.rangeSlider.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/IonDen/ion.rangeSlider/master/js/ion.rangeSlider.min.js"></script>


Edit: According to the documentation, you can configure your slider with the from property to set a default position. Credit to zer00ne for using this concept in his answer first.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.