CODEWITHSUNDEEP
jquerytwitter-bootstrapslider
Lys777
Lys777

Reputation: 456

Bootstrap Slider change value handler

I'm using Bootstrap Slider, and I was wondering if there is any way to include a handler for a value change. I see that the documentation includes handlers for slideStart, slide and slideStop, but none for "change" (of value).

It's possible that they could slide the slider around and (upon release) end up on the same value, in which case I would NOT want the event to fire. Only if they slide it to a new value.

I've tried:

$('#sliderAdminType').slider({
    formater: function(value) {
        // my formater stuff that works
        },
    change: function(event, ui) {
        console.log("has changed");
        }       
    });

and

$('#sliderAdminType').change(function() {
    console.log("has changed");
});

and

$('#sliderAdminType').slider().change(function() {
    console.log("has changed");
});

and

$('body').on('change', '#sliderAdminType', function(e){
    console.log("has changed");
});

Upvotes: 18

Views: 45875

Answers (5)

Jessy Perreault
Jessy Perreault

Reputation: 21

I was just trying to figure this out myself and this is the solution I found with jquery, when the slider is moved:

$('#sliderAdminType').on('input', function() {
   console.log($('#sliderAdminType').val());
});

This is the resource where I found the partial answer: codegrepper.com

Upvotes: 1

TomerMahari
TomerMahari

Reputation: 419

try this if on function didn't work for you like me

$('#yourSlider').bind("slideStop", function (e)

Upvotes: 5

Anton Lyhin
Anton Lyhin

Reputation: 1935

The accepted answer is not valid for range: true slider

Here is double-slider check: https://jsfiddle.net/oayj5Lhb/

For double slider: "change" event returns both newValue and oldValue objects. Keep in mind that 'change', 'slideStart', 'slideStop' events are triggered on mouse move (when I asked why the answer was "this is the proper way of implementation", for me it looks a bit strange). Here an example:

$('#your-slider').slider().on('change', function(event) {
    var a = event.value.newValue;
    var b = event.value.oldValue;

    var changed = !($.inArray(a[0], b) !== -1 && 
                    $.inArray(a[1], b) !== -1 && 
                    $.inArray(b[0], a) !== -1 && 
                    $.inArray(b[1], a) !== -1 && 
                    a.length === b.length);

    if(changed ) {
        //your logic should be here
    }
});

Please note: [2, 1] and [1, 2] are considired to be equal because slider pair can be interchangeable.

Upvotes: 10

Mohammad Karimi
Mohammad Karimi

Reputation: 4223

Instead of change event just use the slide. The promoter is not working well, so in Slide you can set value again.

        var thresholdSlider = $('#Threshold');
        thresholdSlider.slider({
            formater: function (value) {
                return 'Current value: ' + value;
            }
        });

        thresholdSlider.slider().on('slide', function (ev) {
            thresholdSlider.slider('setValue', ev.value);
        });

Upvotes: 1

Felix
Felix

Reputation: 38102

You can do the following steps:

1) Use slideStart event to get the original value of your slider

2) Use slideStop event to get the new value of your slider

3) Compare this two value, if it's different then fire your code

var originalVal;

$('.span2').slider().on('slideStart', function(ev){
    originalVal = $('.span2').data('slider').getValue();
});

$('.span2').slider().on('slideStop', function(ev){
    var newVal = $('.span2').data('slider').getValue();
    if(originalVal != newVal) {
        alert('Value Changed!');
    }
});

Fiddle Demo

Upvotes: 33

Related Questions