Jak uzyskać wartości z JQuery - IonRangeSlider?

Question

Jak mogę uzyskać niskie i wysokie wartości z komponentu ion.rangeSlider, klikając przycisk?

To jest mój kod jQuery:

<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

tu jest rozwiązanie: 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

Poprzednia odpowiedź była oparta na starej wtyczki API i nie działają dłużej. Oto nowa, w wersji 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 3

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

Answer 4

// 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 rozwiązanie w http://jsfiddle.net/2qLum6s7/. Działa z najnowszą wersją Ion.RangeSlider (2.1.2).

Answer 5

dane użyć jQuery jest() metoda:

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

Answer 6

Użyj startowy, zmienić lub zakończyć przeciążenie. Używam przeładowania końcowego i aktualizuję wartość elementu SomeValue.

$("#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); 
     } 
    });