[RESOLU] Slider avec jQuery Mobile

Eléphanteau du PHP | 29 Messages

31 janv. 2015, 17:12

Bonjour, avec jQuery UI j'ai initialisé un slider de cette manière :
[javascript]
$( ".selector" ).slider({
min: 0,
max: 100,
value: 50,
...
});
[/javascript]
Or si je veux faire la même chose avec jQuery Mobile cela ne marche plus (min, max et value ne sont pas pris en compte, un slider vide est affiché). Une alternative serait d'initialiser le slider en html :
<form>
    <label for="slider-1">Slider:</label>
    <input type="range" name="slider-1" id="slider-1" min="0" max="100" value="50">
</form>
Maintenant le slider est affiché avec jQuery Mobile. Comme mon but est de faire un event sur le slider, alors j'ai testé ceci :
[javascript]
$( "#slider-1" ).on( "slidecreate", function( event, ui ) {} );
[/javascript]
Mais rien ne se passe...
J'ai aussi testé cela :
[javascript]
$( "#slider-1" ).slider({
create: function( event, ui ) {}
});
[/javascript]
Et la ça m'affiche un second slider ! (le premier étant celui créé en html)
Du coup ma question est de savoir comment créer un event sur un slider jQuery Mobile.
Merci d'avance !

Eléphanteau du PHP | 29 Messages

31 janv. 2015, 19:07

RESOLU :

Il faut absolument passer par html :
<form>
    <label for="slider-1">Slider:</label>
    <input type="range" name="slider-1" id="slider-1" min="0" max="100" value="50">
</form>
Et à la place de :
[javascript]
$( "#slider-1" ).on( "slidecreate", function( event, ui ) {} );
[/javascript]
Il faut écrire ça :
[javascript]
$(document).on( "slidecreate", "#slider-1", function( event, ui ) {} );
[/javascript]

Avatar du membre
Administrateur PHPfrance
Administrateur PHPfrance | 9782 Messages

31 janv. 2015, 21:01

Merci pour le partage de la solution :D
Quand tout le reste a échoué, lisez le mode d'emploi...