如何获取Bootstrap滑块的值？

Question

如何获取Bootstrap滑块的值并将其隐藏在输入框中？

<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]
  });
});

- NETTO

---

尝试使用 $(selector).slider('getValue')。 - Evan Hahn

Answer 1

我认为它目前不能正常工作。

文档说明：

方法

.slider('getValue')

获取值。

然而，调用 $('#sliderDivId').slider('getValue') 返回的是jQuery选择器，而不是值...

目前，你可以手动从数据对象中获取它... $('#sliderDivId').data('slider').getValue()

- ilovett

---

你的回答为我和我的搭档节省了很多时间和麻烦！谢谢！ - raskhadafi

你的回答是正确的。它为我节省了很多时间。谢谢。 - Wikki

节省了我的时间，谢谢。 - cac

如何获取最小值和最大值，请给予说明。 - Nithin Paul

@JoeD 这是一个滑块值的数组。第一个索引代表最小值，第二个索引代表最大值。 - khairul.ikhwan

Answer 2

快速修复：

$.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))));
        }
    })
};

- vadimchin

---

感谢修复此插件，也许可以考虑提交 pull request！ - Derek Adair

Answer 3

问题在于，有不止一个具有相同ID的元素（滑块

和滑块

内部的），在这个例子中是$('#sliderDivId')。如果你使用JQuery选择输入元素，你可以使用滑块API。

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

- jules

Answer 4

我知道我来晚了，但这个仍然有问题，要修复它，请打开bootstrap-sliders.js并注入以下三个内容：

在第一个函数Slider的末尾：

this.calculateValue();

---

在calculateValue函数中，在return val;之前。

grandVal = val;

---

在 $.fn.slider 函数之后：

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

现在您可以通过 $('#MySliderId').sliderValue() 访问该值。

- Joseph Dailey

Answer 5

在撰写时，它有点不稳定，但您可以让它正常工作：

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;
});

- Dominic Williams

---

尝试过这个，但 ev.value 返回 undefined。=( - cj5

谢谢！ev.value完美运作！返回范围滑块的数组。 - kaarto

Answer 6

你可以使用内置函数来实现这个功能

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

谢谢，我想和大家分享这个:D

- Alaa M. Jaddou