web-dev-qa-db-ja.com

スライダーブートストラップの値を取得する方法は？

スライダーの値を取得する方法bootstrap to hidden iputs？

 <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
21
NETTO

現在壊れていると思います。

ドキュメントの状態：

方法

.slider（ 'getValue'）

値を取得します。

ただし、$('#sliderDivId').slider('getValue')を呼び出すと、値ではなくjQueryセレクターが返されます...

今のところ、データオブジェクトから手動で取得できます... $('#sliderDivId').data('slider').getValue()

55
ilovett

高速修正：

$.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

問題は、同じID（スライダーdivとinputスライダー内div）、この例では$（ '＃sliderDivId'）。 JQueryで入力要素を選択すると、スライダーAPIを使用できます。

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

執筆時点では少し不安定ですが、機能させることができます。

1 /「value [0]」で始まる空の範囲を指定してください。これを行わない限り、その内部値フィールドは未定義になります。

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

2 /最後に、イベントで値をキャッチできます

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

私は遅れていることは知っていますが、これはまだ壊れていますが、それを修正するには_bootstrap-sliders.js_を開き、これらの3つのものを注入します：

最初の関数の最後：Slider：

_this.calculateValue();
_

直前：_return val;_ calculateValue関数内

_grandVal = val;
_

_$.fn.slider_関数の後：

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

これで、$('#MySliderId').sliderValue()で値にアクセスできます

1
Joseph Dailey

これは組み込み関数から使用できます

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

ありがとうございます

0
Alaa M. Jaddou