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?
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 (e.g. 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.