CODEWITHSUNDEEP
javascriptjquery-mobile
ceremcem
ceremcem

Reputation: 4350

Get and set values of jQuery mobile slider

How can I call a Javascript function when jQueryMobile slider changed and how can I set the slider's value from a callback?

Here is what I tried so far: 

    <div class="switch-actor slider" >
      <input type="range" name="my_test_slider" value=45 min="0" max="100" />
    </div>

This is Javascript part: 

setSliders = function(){
  $('.slider').each(function(){
    var elem;
    elem = $(this);
    console.log("this slider initialized! ", elem);
    elem.on('change', function(event){
      console.log("event, ui: ", event);
    });
  });
};

Edit

This answer does not help either: https://stackoverflow.com/a/14961612/1952991

Edit-2

This hack works now: 

setSliders = function(){
  $('.slider').each(function(){
    var elem, actor, slider, setSliderValue;
    elem = $(this);
    actor = elem.data('actor');
    slider = elem.find('input');
    slider.on('change', function(){
      return console.log(slider.prop('value'));
    });
    setSliderValue = function(val){
      var movingPart;
      slider.prop('value', val);
      movingPart = elem.find('a');
      movingPart.prop('aria-valuenow', val);
      movingPart.prop('aria-valuetext', val);
      movingPart.prop('title', val);
      return movingPart.css('left', String(val + '%'));
    };
    setSliderValue(23);
  });

Upvotes: 0

Views: 1090

Answers (2)

ezanker
ezanker

Reputation: 24738

If you put the .slider class on the input instead of the container div:

<div class="switch-actor " >
  <input class="slider" type="range" name="my_test_slider" value="45" min="0" max="100" />
</div>

You can simply catch the change event and set the val():

$(".slider").on("change", function(){
    console.log($(this).val());
});

$("#btnSet").on("click", function(){
    $(".slider").val(42).slider( "refresh" );
    //make the change event fire
    $(".slider").change();
});

DEMO

Upvotes: 1

Deepak
Deepak

Reputation: 161

slidestart triggered when there's an initial interaction with the slider. Includes drags and taps.

$( ".selector" ).on( 'slidestart', function( event ) { });

slidestop triggered at the end of an interaction with the slider. Includes drags and taps.

$( ".selector" ).on( 'slidestop', function( event ) { });

Upvotes: 0

Related Questions