javascriptjqueryslider

How to get values from JQuery - IonRangeSlider?


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>

Solution

  • here is a solution: http://jsfiddle.net/IonDen/xaaw56bk/

    var $range = $(".js-range-slider"),
        $result = $(".js-result"),
        $getvalues = $(".js-get-values"),
    
        from = 0,
        to = 0;
    
    var saveResult = function (data) {
        from = data.fromNumber;
        to = data.toNumber;
    };
    
    var writeResult = function () {
        var result = "from: " + from + ", to: " + to;
        $result.html(result);
    };
    
    $range.ionRangeSlider({
        type: "double",
        min: 10,
        max: 50,
        from: from,
        to: to,
        onLoad: function (data) {
            saveResult(data);
            writeResult();
        },
        onChange: saveResult,
        onFinish: saveResult
    });
    
    $getvalues.on("click", writeResult);