How to get values ​​from jQuery - IonRangeSlider?

Question

how to 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 1

here is the 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); 

Answer 2

 // Launch plugin $("#range").ionRangeSlider({ type: "double", min: 0, max: 1000, from: 200, to: 500 }); // Saving it instance to var var slider = $("#range").data("ionRangeSlider"); // Get values var from = slider.result.from; var to = slider.result.to; 

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

Answer 3

The previous answer was based on older plugin APIs and no longer works. Here is a new one for version 2.x: http://jsfiddle.net/IonDen/2L15xoym/

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

Answer 4

Use jQuery data () method:

 var low = $('#range_1').data().from; var high = $('#range_1').data().to; 

Answer 5

 const range = $('#range_1'); const rangeData = range.data('ionRangeSlider'); const start = rangeData.result.from; const max = rangeData.result.max; // rangeData.result['property'] 

Version 2.3.0 (tested)

Answer 6

 var val = $('#theSpecificSliderID').slider('value'); // Get value <br> $('#theSpecificSliderID').slider('value', 33); // Set value 

Answer 7

Use start, variable, or finish overload. I am using finish overloading and updating the value for the SomeValue element.

  $("#Range_1").ionRangeSlider({ min: 0, max: 100, type: 'single', step: 1, postfix: " %", prettify: false, hasGrid: true, onFinish: function(data){ var value = data.fromNumber; $("#SomeValue").val(value); } });