How to call range slider values in another function using Javascript

I’ve range slider in my project that returns the minimum and maximum mileage values. I want to grab the values in another Javascript function for further processing. It’s working all the way good but as soon as I tried to wrap my slider into a function firstFunction(){}, it stopped to appear on the page.

How would I get the values in another function?

HTML

 <div id="mileage-range"></div>
  <div class="d-flex justify-content-between mt-2">
   <input class="range" onchange="firstFunction()" type="text"  readonly="readonly" id="range_mileage" />
  </div>

Javascript

function firstFunction() {  
  var myslider= $('#mileage-range');
  myslider.ionRangeSlider({
    type: "double",
    min: 0,
    max: 200000,
    from: 0,
    to: 200000,
    postfix:" km",
    max_postfix:"+",
    onFinish: function(data) {
      $("#range_mileage" ).val( "$" + data.from + " - $" + data.to );
      var value1 = data.from;
      var value2 = data.to;
      return {
        min: value1,
        max: value2,
      }      
    }
  })
}//End of function

$("#mileage-range").on("change", function(){ 
  var values=firstFunction();  // this will grab you the return val
  var first = values.val1;
  var second = values.val2;
  console.log(first);
  console.log(second);
});

Answer

If your AJAX call happens whenever your range slider changes (finishes changing), then you can use the onFinish parameter to pass a function to implement the AJAX call:

<input type="text" class="js-range-slider" name="range" value="" />

<script>
    function processAJAX (data) {
        var from = data.from;
        var to = data.to;
        // get your other data
        // package all of the data and send the AJAX call
    }

    // Setup your slider
    var myslider= $('#mileage-range').ionRangeSlider({
        type: "double",
        min: 0,
        max: 200000,
        from: 0,
        to: 200000,
        postfix: " km",
        max_postfix: "+",
        onFinish: processAJAX
    });
</script>

That would, of course, result in an AJAX call every time one of the sliders is moved.

If your AJAX call happens at a different time (e.g. your user sets other values besides the slider values before clicking an update button), then you can use a couple of variables to store the from/to values until you’re ready to send the AJAX call. (I included a couple of global variables in my example below, but you can limit the scope as you see fit).

The Ion range slider’s public methods (according to their website) only allows you to update parameter values, reset the values, or destroy the slider. It doesn’t appear that you can read the current values (I didn’t check the code). That’s why you’ll need to save the values every time the user finishes moving one of the handles.

<input type="text" class="js-range-slider" name="range" value="" />

<script>
    // global variables
    var sliderFrom;
    var sliderTo;

    function saveSliderValues (data) {
        sliderFrom = data.from;
        sliderTo = data.to;
    }

    // Setup your slider
    var myslider= $('#mileage-range').ionRangeSlider({
        type: "double",
        min: 0,
        max: 200000,
        from: 0,
        to: 200000,
        postfix: " km",
        max_postfix: "+",
        onFinish: saveSliderValues
    });


    function processAJAX (data) {
        var from = sliderFrom;
        var to = sliderTo;
        // get your other data
        // package all of the data and send the AJAX call
    }
</script>

I left in the handle to the slider (myslider = $('#mileage-range')...), but unless you need to be able to change or reset the slider values, you probably won’t need the handle.