jQuery Mobile range Slider input box alignment

Question

I'm having trouble implementing the rangeslider widget as shown in the jQuery mobile demo page . It looks perfect there, however, if I copy the exact same code:

<form>
<div data-role="rangeslider">
<label for="range-1a">Rangeslider:</label>
<input type="range" name="range-1a" id="range-1a" min="0" max="100" value="40">
<label for="range-1b">Rangeslider:</label>
<input type="range" name="range-1b" id="range-1b" min="0" max="100" value="80">
</div>
</form>

the input boxes are totally displaced, as seen in this jsFiddle .

What do I do wrong? Why has it be so hard to just insert the same slider as in the demo page?

Answer 1

I don't know how, but somehow I remembered that there might be a problem with copy & paste. But since this can be difficult to find out, I'll leave the question here with the working solution for anyone else to look up:

Copying the code from the jQuery Mobile demo page inserts some special invisible characters for the spaces, which will produce this strange behavior. Make sure that all white spaces are actual whitespaces (eg with find & replace in an editor or by writing the code yourself).

Therefore, using the code snippet from top does indeed work, since the strange whitespaces are not included.

Answer 2

I had the same issue, this is indeed due to jQuery View source converting spaces to nonbreaking spaces ( \슠 )

Converting those unicode characters to standard spaces fixes the problem

edit this seems only happen with Webkit browsers, Firefox copies the correct characters