Jquery Mobile Slider change event

Question

I have a jquery mobile slider on a simple page. When I drag the slider, the value updates as expected in the textbox. I have looked but cannot find where this logic is happe

Answer 1

Use this code,

$( ".mySliders" ).slider({
    create: function (event, ui) {
        $(this).bind('change', function () {

        });
    }
});

Do not put type="range" to your input tags, put type="text" instead.

Since you are calling slider function manually.

Answer 2

I'm not too familiar with jquery mobile, but adding a change handler to the original input element should do:

$('#slider-1').change(function(){
    var slider_value = $(this).val()
    console.log(slider_value)
    // do whatever you want with that value...
})

Hope this help,

Martin

Answer 3

try this:

var self = this;
this.sliderTouchUp = function() {
    var currentVal = $('#slider-1').val();
    console.log("val change to " + currentVal);
};
$('.ui-slider').live('mouseup', self.sliderTouchUp);
$('.ui-slider').live('touchend', self.sliderTouchUp);

Answer 4

Michael. Try to surround the slider with another element:

<div id="div-slider">
  <input type="range" id="slider-1" />
</div>

And you can get an event on change:

$("#div-slider").change(function() {
  var slider_value = $("#slider-1").val();
  // do something..
});

Answer 5

I had the same problem, too many troubles with the event of the slider. Finally I found 'slidestop' event that works great. This is the code:

$( "#slider-1").on('slidestop', function( event ) {
   var slider_value=$("#slider-1").slider().val();
   alert('Value: '+slider_value);
});

I hope this work for you

Answer 6

i'm using this code and it works in jquery mobile 1.4.3.

$(".ui-slider").on('change', function(event) { 
    var valuenow = $(this).find(".ui-slider-handle").attr("aria-valuenow");
    console.log(valuenow);
});