How to get values from JQuery - IonRangeSlider?

Gem picture Gem · Oct 29, 2014 · Viewed 23k times · Source

how can I get low and high values from ion.rangeSlider component by clicking a button?

This is my jQuery code:

<script>
    $(document).ready(function(){
        $("#range_1").ionRangeSlider({
            min: 10,
            max: 50,
            from: 10,
            to: 20,
            type: 'double',
            step: 1,
            prettify: true,
            hasGrid: false
        });
    });
</script>

<script>
 $(document).ready(function(){
    $('#get_values').click(function(){
            var low = $('#range_1').... ???;
            var high = $('#range_1').... ???;
            alert(low);
        });
 });
</script>

Answer

Shari Cahill picture Shari Cahill · Jan 5, 2016
// Launch plugin
$("#range").ionRangeSlider({
    type: "double",
    min: 0,
    max: 1000,
    from: 200,
    to: 500
});

// Saving it's instance to var
var slider = $("#range").data("ionRangeSlider");

// Get values
var from = slider.result.from;
var to = slider.result.to;

See solution at http://jsfiddle.net/2qLum6s7/. Works with latest version of Ion.RangeSlider (2.1.2).