iframe opacity with input type=range (slider) not recognizing 1.0

I'm building an internal tool here at work to help back-end developers match front-end comps. What I'm doing is giving developers a little toolbar in their browser that will overlay an iframe and load a comp dependin开发者_如何学编程g on a checkbox they click. They can toggle this on and off as well as adjust the opacity of the iframe.

I'm running into a problem where, with the slider, it doesn't seem to recognize '1.0' as my opacity. When I first load it up, the iframe is at 100% opacity. If I use the slider to go down in value, the iframe reduces opacity. When I use the slider to go back up in value, the opacity increases until I get to the end, the max value of 10. It works up to 9, but there is no change from 9 to 10.

Here's the form element/slider:

<input id="range" size="1" type="range" min="0" max="10" step="1" value="10">
<label id="range_label" for="range">Comp opacity:</label>

And my event handler:

$('#range').change(function() {
    var val = this.value;
    console.log(val);

    if (val == 10) {
        iframe.style.opactiy = '1.0';
    } else {
        iframe.style.opacity = '0.' + this.value;
    }
});

Anyone have any ideas?

Edit: I've updated the range to go to 0-100 (incrementing 1 for each step) instead of 0-10 and it helps a little as instead of ending at 90% opacity, I seem to end at 99%. Would still love to know how to get opacity at 1.0.

---

Looks like a typo. try

iframe.style.opacity = '1.0';