CODEWITHSUNDEEP
jquerysliderjquery-events
RobbTe
RobbTe

Reputation: 405

Get value of price slider in a hidden field?

I want to update the value of a hidden field with the value of a price slider. I use some jQuery to accomplish this.

The code below works, but I needed a setTimeout in order to get the correct value. Without the setTimeout it updates the hidden field value with the previous slider value, not the most recent one.

Therefore I was wondering if there is also a check/event like 'on slide stop', so the code is only executed when the slider button is not active anymore. Any ideas?

Below my code:

<html>
<head>
<script>
        (function( $ ) {
            $(document).ready(function() {

                var tw_total = $('.btQuoteTotalCalc').text();
                $("#calculated_total").attr("value",tw_total);

                $('.btQuoteSlider').on('slide', function(event, ui) {
                    setTimeout(function() {
                        var tw_total = $('.btQuoteTotalCalc').text();
                        $("#calculated_total").attr("value",tw_total);
                    }, 500);
                });

            });
        }(jQuery));
</script>
</head>
<body>
     <div class="btQuoteSlider"></div>
     <div class="btQuoteTotalCalc">Slider total</div>

     <input type="hidden" name="calculated_total" value="" id="calculated_total">
</body>
</html>

Upvotes: 0

Views: 86

Answers (1)

Kundan Singh Chouhan
Kundan Singh Chouhan

Reputation: 14302

I think you are using jQuery UI library for the slider element and if so, you don't need to have the setTimeout function. The event itself give the value that the handle will move to if the event is not canceled.

Try this instead -

$('.btQuoteSlider').on('slide', function(event, ui) {
    $("#calculated_total").attr("value", ui.value);
});

Reference: https://api.jqueryui.com/slider/#event-slide

Upvotes: 1

Related Questions