Discussion :

[surfeur22]

Bonjour,

Avec Jquery UI, Slider-Range je n'arrive pas à obtenir ce que je veux :

Ce que je veux :

1 curseur : positionné à 18 et ensuite il devrait prendre les valeurs. 18, 19, 20, etc... jusqu'à 100
2 ème curseur : positionné au départ à 50 et il devrait prendre les valeurs de 18, 19 , 20, etc... jusqu'à 100
L'idée est de permettre aux visiteurs de choisir un écart entre 2 années (de 18 à 100)
Un exemple : entre 25 et 43

J'ai déjà défini ce code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
$( "#slider-range" ).slider( "values", [ 18, 100 ] );
$( "#slider-range" ).slider( "option", "values", [ 18, 100 ] );

mais je suis loin du compte si on déplace le curseur de gauche à la fin on obtient 0100
et si on déplace le curseur à la droite on a 18100
et lorsque on déplace les curseurs on a encore des grand chiffres et ceci à chaque déplacement.

c'est pas simple !!!!

[Toufik83]

Bonjour,

Utilise les options offertes par le plugin, surtout les callbacks start et slide :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<span id="infos"></span>
<div id="slider-range">
 
</div>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
$("#slider-range").slider({
  range: true,
  min: 18,
  max: 100,
  values: [18, 100],
  start: function(event, ui) {//lorsqu'on bouge le curseur.
    $("#infos").html(ui.values[0] + " - " + ui.values[1]);
  },
  slide: function(event, ui) {//lorsqu'on libère le curseur.
    $("#infos").html(ui.values[0] + " - " + ui.values[1]);
  }
});