CODEWITHSUNDEEP
jqueryhtmljquery-mobilejquery-ui-slider
smaj08r
smaj08r

Reputation: 229

Mobile JQuery Slider's step increment not working

I am using MJQuery slider. The step increment in the slider is not working when i am using Mobile JQuery. however, it is working for the normal version This is version of the page without using mobile JQuery. In this case you cannot position slider control at any point in the range.

http://users.ecs.soton.ac.uk/smaj08r/vidtest/indexNotMJQ.html

code:

<html>
<script src="jquery-1.8.3.js"></script>
 </head>
<body>
This is slider without MJQuery
 <input type="range" name="slider-step" id="slider-step" value="2" min="1" max="4" step="1" />
</body>
</html>

In the following version, I am using Mobile JQuery and here the Step Increment in the slider control is not working. You can position the slider at any intermediate point between two increments.

http://users.ecs.soton.ac.uk/smaj08r/vidtest/indexMJQ.html

code:

 <html><head>
 <script src="jquery-1.8.3.js"></script>
   <meta name="viewport" content="width=device-width, initial-scale=1"> 
   <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
   <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js">     
   </script>
</head><body>
<div data-role="page">
    <div data-role="content">
        <input type="range" name="slider-step" id="slider-step" value="20" min="0" max="100" step="20" />
 </div>
 </div>

  </body>
 </html>

In the mobile JQuery version the slider can be positioned at any point in the range which is wrong. I have no idea Why? Please Help. Many thanks,

Upvotes: 0

Views: 699

Answers (2)

smaj08r
smaj08r

Reputation: 229

That is not the case with the current 1.2 version of jQuery Mobile. The 'test' docs are just that. It would be nice if they didn't show up in Google searches. You can find the live docs here:

jquerymobile.com/demos/1.2.0/docs/forms/slider

Notice that the slider does not behave as you have described. – andleer

the actual behavior of slider using jquery mobile is different from this one.

jquerymobile.com/test/docs/forms/slider/index.html

Upvotes: 0

andleer
andleer

Reputation: 22568

You are missing required jQuery Mobile markup:

<div data-role="page">
    <div data-role="content">
        <input type="range" name="slider-step"
            id="slider-step" value="2" min="1" max="4" step="1" />
    </div>
</div>

The slider looks OK. The step limits the values, not the slider. A step of 1 is somewhat meaningless.

Upvotes: 1

Related Questions