Question

I’m using a jQuery mobile slider in a JQM dialog but it’s not being rendered properly, it’s most noticeable in safari and chrome. It renders fine in a standard JQM page.

<div data-role="dialog" id="Dialog1"> 
<div data-role="header"> <h1> Dialog</h1> </div>
<div data-role="content">
     <label for="slider-2">Input slider:</label>
     <input type="range" name="slider" id="slider-2" 
                   value="25" min="0" max="100"  />
</div>
<div data-role="footer"><h3>Footer</h3></div>
</div>

Here’s a link to a jsfiddle illustrating the issue, if you click the “open dialog” button the slider isn’t rendered correctly but if you click the “open as page” it is.

I’ve tried calling .slider() and .slider(‘refresh’) in the pageshow event but it doesn’t seem to make a difference.

Answer 1

There is an easier way to fix that:

<input type="number" data-type="range" name="slider" id="slider-0" value="0" min="0" max="100">

Its an number type but with an range data-type. Figured it out by playing around with the code.
Works fine so far!

Anyway it’s fixed in the latest version 1.0.1!