jQuery Mobile's (dual) rangeslider produces two separate sliders

Question

I'm having a lot of trouble creating a dual rangeslider with jQuery mobile. When i implement the following suggested code from the jQuery Mobile docs I simply get two separate slider beneath each other.

<div data-role="fieldcontain">
    <div data-role="rangeslider" data-mini="true">
        <label for="range-8a">Rangeslider:</label>
        <input type="range" name="range-8a" id="range-8a" min="0" max="100" value="0">
        <label for="range-8b">Rangeslider:</label>
        <input type="range" name="range-8b" id="range-8b" min="0" max="100" value="100">
    </div>
</div>

I ideally want to stay away from jQuery UI as this will be another framework (and quite a large one) that the user will have to download if they don't already have it cached. I'm trying to keep my application as lightweight as possible. Perhaps i'm doing something wrong in my implementation?

What version of jQuery Mobile are you using? – Aurelio De Rosa Feb 10 '13 at 18:03 — Aurelio De Rosa, Feb 10 '13 at 18:03
@AurelioDeRosa I'm using 1.2.0 – garethdn Feb 10 '13 at 21:45 — garethdn, Feb 10 '13 at 21:45

score 1 · Accepted Answer · answered Feb 10 '13 at 21:47

1

Based on your comment, the problem is that you're using the wrong version of jQuery Mobile. The rangeslider is a new feature of the 1.3.0 version that is currently in beta. So, if you want to use this new feature, you've to use that version.

answered Feb 10 '13 at 21:47

Aurelio De Rosa

21,856
8
48
71

jQuery Mobile's (dual) rangeslider produces two separate sliders

1 Answers1