CODEWITHSUNDEEP
jquery
Stuckfornow
Stuckfornow

Reputation: 290

How to grab the values from a slider with jquery

I have a slider that I grabbed from Codepen.io here is the link to the slider I am using

https://codepen.io/dpdknl/pen/QggQRq

I want to grab the values of what the slider is displaying in the span so I can pass it to my jquery function. How could I grab that value? I am using an onchange event to send the value to the jquery function.

<div class="range" data-labels='["All", "18 - 21","22 - 29","30 - 39","40 - 49","50+"]'>
    <input name="range" type="range" id="rangeAge" min="0" step="1" max="100" value="0">
    <div class="range-output">
        <output class="output" name="output" for="range"><span></span></output>
    </div>
    <div class="label-container">
        <div class="left-label" style="display:none;"></div>
        <div class="right-label" style="display:none;"></div>
    </div>
</div>

And then I tried to grab them with this...

    $('#rangeAge').on('slidechange', function(){        
        var min = $('#rangeAge').slider().value();  
        alert(min);
    });

Thanks for any and all help.

Fiddle of current code

https://jsfiddle.net/NoJqueryMaster/d45envbu/3/

Upvotes: 0

Views: 116

Answers (1)

Nathan Hawks
Nathan Hawks

Reputation: 587

The value is accessible via:

$('#rangeAge').slider().value()

That's the general formula whenever you need to work with a modified element, meaning, anything to which you attach that JQuery-UI magic.

$(selector).widgetTypeName().methodInThatWidget()

Now that you know that, here's the API docs for your specific case.

With events it's a little bit different. You have to pay attention to the examples they give on each widget's API page. For example, the slider's onChange event works like this:

$(selector).on('slidechange', callback)

Go forth and work that JQuery magic!

Upvotes: 1

Related Questions