How to get the value of the slider bootstrap?

Question

How to get the values of the slider 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]
  });
});

Upspring

Try $(selector).slider('getValue'). – Insomuch

Answer 1

I think it's currently broken.

Documentation states:

Methods

.slider('getValue')

Get the value.

How ever, calling $('#sliderDivId').slider('getValue') returns the jQuery selector rather than the value...

For now you could manually grab it from the data object... $('#sliderDivId').data('slider').getValue()

Finbar

Your answer saved me and my pairing partner a lot of time and troubles! Thank you! – Upcountry

Your answer was correct. It saved me lot of time. thanks – Pooler

How do i get Min and Max values, please give explanation for that too. – Tevet

It works but I seem to get 2 values in my output. Any ideas why? – Beichner

@JoeD it is an array of the slider's value. The first index represent min value and second index is max value. – Damaraland

Min and max: $("#revenueHistogramInput").data("slider").getAttribute("min"); $("#revenueHistogramInput").data("slider").getAttribute("max"); – Downing

Answer 2

fast fix:

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

Mensural

props for fixing this plugin, may want to submit a pull request! – Blooded

Answer 3

The problem is, that there is more than 1 element with the same ID (the slider div and the input inside the slider div), in this example $('#sliderDivId'). If you select the input element with JQuery, you can use the slider API.

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

Hibbert

Answer 4

At time of writing it's a bit flaky but you can make it work:

1/ Make sure you specify an empty range starting "value[0]". Unless you do this its internal value field becomes undefined e.g.

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

2/ Now finally you can catch the value in the event

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

Kamal

Tried this, but ev.value returns undefined. =( – Incommode

Thank you! ev.value works perfectly! Returns array for range slider. – Galloromance

Answer 5

I know I'm late but this is still broken but to fix it open up bootstrap-sliders.js and inject these three things:

the very end of the first function: Slider:

this.calculateValue();

---

right before:return val; in the calculateValue function

grandVal = val;

---

after the $.fn.slider function:

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

Now you can access the value by $('#MySliderId').sliderValue()

Gremlin

Answer 6

you can use this from the built in function

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

and thank you i thought i coud share this with you guys :D

Causation