How to grab the values from a slider with jquery

94
January 01, 2020, at 7:30 PM

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/

Answer 1

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!

READ ALSO
node.js (npm) openlayers application will behave badly attempting to read a file

node.js (npm) openlayers application will behave badly attempting to read a file

I'm gaining experience with openlayers v6 and NPM (and experience is what you get when you did not get what you wanted)

70
How can I convert lightbox image gallery jquery code to Next.js code?

How can I convert lightbox image gallery jquery code to Next.js code?

I have a landing page applicationI preferred Next

71
validating form inputs with special names

validating form inputs with special names

I am trying to validate a dynamically generated form input but i cant seem to get it to work

74
jQuery xmlns=&ldquo;&hellip;&rdquo; attribute causing formatting problems in Chrome

jQuery xmlns=“…” attribute causing formatting problems in Chrome

I am using jQuery to dynamically build a table of itemsBelow is a simplified version of the code that reproduces the issue I am running into

96