web-dev-qa-db-fra.com

Comment obtenir la valeur du slider bootstrap?

Comment obtenir les valeurs du slider bootstrap en entrées cachées?

 <input type="hidden" name="min_value" id="min_value" value="">
 <input type="hidden" name="max_value" id="max_value" value="">

 $(function() {
    $( "#slider-range-s1" ).slider({
        range: true,
        min: 0,
        max: 500,
        value: [ 0, 500 ]
    });
 });
javascripttwitter-bootstrapsliderbootstrap-slider
20
NETTO

Je pense qu'il est actuellement cassé.

États de la documentation:

Les méthodes

.slider ('getValue')

Obtenez la valeur.

Cependant, l'appel de $('#sliderDivId').slider('getValue') renvoie le sélecteur jQuery plutôt que la valeur ...

Pour l'instant, vous pouvez le récupérer manuellement à partir de l'objet de données ...$('#sliderDivId').data('slider').getValue()

54
ilovett

solution rapide:

$.fn.slider = function (option, val) {

    if (typeof option == 'string') {
        if (this.length) {
            var data = this.eq(0).data('slider');
            if (data)
                return data[option](val);

            return null;
        }
    }

    return this.each(function () {
        var $this = $(this),
            data = $this.data('slider'),
            options = typeof option === 'object' && option;
        if (!data) {
            $this.data('slider', (data = new Slider(this, $.extend({}, $.fn.slider.defaults, options))));
        }
    })
};
6
vadimchin

Le problème est qu'il y a plus d'un élément avec le même ID (le curseur div et le input à l'intérieur du curseur div), dans cet exemple $ ('# sliderDivId') . Si vous sélectionnez l'élément d'entrée avec JQuery, vous pouvez utiliser l'API curseur.

$('input[id="sliderDivId"]').slider('getValue')
2
jules

Au moment de la rédaction, c'est un peu floconneux, mais vous pouvez le faire fonctionner:

1/Assurez-vous de spécifier une plage vide commençant par "valeur [0]". Si vous ne le faites pas, son champ de valeur interne devient indéfini, par exemple.

$('#setBidDialogSlider').slider({ value: [0], max: max, step: 0.2, formater: function(v) { return v.toFixed(2)+"BTC" } });

2/Enfin, vous pouvez attraper la valeur de l'événement

$('#setBidDialogSlider').slider().on('slide', function(ev) {
    $scope.dialog.order_value = ev.value*$scope.dialog.price;
});
1
Dominic Williams

Je sais que je suis en retard, mais cela reste brisé, mais pour y remédier, ouvrez bootstrap-sliders.js et injectez ces trois choses:

la toute fin de la première fonction: Slider:

this.calculateValue();

juste avant: return val; dans la fonction calculateValue

grandVal = val;

après la fonction $.fn.slider:

$.fn.sliderValue = function(){
    return grandVal;
};
var grandVal;

Maintenant, vous pouvez accéder à la valeur par $('#MySliderId').sliderValue()

1
Joseph Dailey

vous pouvez l'utiliser depuis la fonction intégrée 

$( "#slider-range-s1" ).slider({
    range: true,
    min: 0,
    max: 500,
    value: [ 0, 500 ]
    slide: function( event, ui ) {
        // u could use this function
        $(".min-slider-value").html( "$" + ui.values[ 0 ]);
        $(".max-slider-value").html( "$" + ui.values[ 1 ]);
    },
    change: function(event, ui) {
        // or u could use this function
        $(".min-slider-value").html( "$" + ui.values[ 0 ]);
        $(".max-slider-value").html( "$" + ui.values[ 1 ]);
    }
});

et merci je pensais que je pourrais partager cela avec vous les gars: D

0
Alaa M. Jaddou