[paulD]

Just wondering if anyone has been using a slider in their projects? Ive been trying to get the JQuery mobile slider working. I can load it in fine using the HTML widget and style it not a problem but can’t seem to find a way of referencing it to fire a function.

If anyone got a example i would be very much appreciative.

Thanks

Paul

[paulD]

Ok Guys, got this puppy working! Took a while but got there in the end!!!

Anyway you can get it working buy adding the following code into a HTML widget.

First bit just initialises the slider using the <input> tags

<div>
    <label for="slider-3">Slider:</label>
    <input type="range" name="slider-3" id="slider-3" data-track-theme="d" data-theme="b" min="0" max="100" value="100">
  </div>

The second bit is just a couple of functions to show it doing something using slidestop and change. Because we are using the <input> tags we don’t need to reference the sliders lable just use input.

<script type="text/javascript">
  
$(document).ready(function() {

    $( "input").bind("slidestop", function( event ) {
           var slider_value=$("input").slider().val();
           alert('Value: '+slider_value);
        });
                
    $("input").bind ("change", function (event){
         $('#m1-slider-image1').css ( { opacity : $("input").val () / 100 } );
          });
});

</script>

Hope that helps someone. I’m not a coder so if there’s a better way please shout out. I’ve included the files for you to play with. Just to let you know the demo will not run in the new simulator for some reason but works fine in chrome and ive tested it on my IPAD as a native app and it works.

Thanks

Paul

Attachments:

You must be logged in to view attached files.

[Muhammad]

Thank you for this sample!!
I am looking something to change my apps design, and this sample is fit with my apps.

[paulD]

No worries Mohammed, hope you find it useful!

Paul

[Author]

Posts