Get current value on sliderstop and set cookie

Question

I'm using jQuery UI slider to set css opactiy, followed the api docs on how to get the value but when I test it it's not changing the opacity value of the element.

EDIT: Everything is now working (sending value and setting cookie), I've updated the code below if it's any help to anybody, thanks for your input guys!

HTML:

<h5>Header Opacity</h5>

<div id="op-slider-header"></div>
<input id="headerOpVal" type="hidden" />

<script type="text/javascript">
// header opacity 
$(function() {

    if ($.cookie('headOp')==null){
        $.cookie('headOp',0.5);

    }
    $('.row.header .bg').css('opacity', $.cookie('headOp'));

    $( "#op-slider-header" ).slider({
        max: 1,
        min: 0,
        value: $.cookie('headOp'),
        step:0.1,
        slide: function(e,ui) {

          $.cookie('headOp',ui.value);
         $('#headerOpVal').html(ui.value);
        }
    });


    $( "#op-slider-header" ).on( "slidestop", function( event, ui ) {
        var val = $('#headerOpVal').html(ui.value);
        $('.row.header .bg').css('opacity', ui.value);
        $.cookie("headOp", ui.value, { expires: 7});
    });
});
</script>

Answer 1

I think you may have to ensure that you are setting the opacity to an integer. Try this:

var val = parseFloat(ui.value, 10);

Shouldn't ui variable in your slidestop event listener contain the slide value?

Answer 2

I would use $('#headerOpVal').attr("value", ui.value); to store value instead of html.

And usign $('#headerOpVal').attr("value"); to retrive that value.

But it's hard to say wich is the problem, try to post the html too.