web-dev-qa-db-fra.com

Comment obtenir des valeurs de JQuery - IonRangeSlider?

comment puis-je obtenir les valeurs basses et hautes de ion.rangeSlider composant en cliquant sur un bouton?

Ceci est mon code 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>
javascriptjqueryslider
9
Gem

voici une 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);
5
IonDen
// 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;

Voir la solution à http://jsfiddle.net/2qLum6s7/ . Fonctionne avec la dernière version de Ion.RangeSlider (2.1.2).

12
Shari Cahill

La réponse précédente était basée sur l’ancienne API de plug-in et ne fonctionne plus. Voici le nouveau, pour la 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);
6
IonDen

Utilisez la méthode data () de jQuery:

var low = $('#range_1').data().from;
var high = $('#range_1').data().to;
3
soheilpro
var val = $('#theSpecificSliderID').slider('value'); // Get value <br>
$('#theSpecificSliderID').slider('value', 33); // Set value
0
Jai Kumar Rajput

Utilisez le début, le changement ou la fin de la surcharge. J'utilise la surcharge de finition et met à jour la valeur à l'élément 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);
        }
    });
0
Yat Fei Leong