Slider Range jquery ui avancé [Résolu]

dElwinn
Messages postés
11
Date d'inscription
jeudi 10 novembre 2011
Dernière intervention
27 avril 2012
- 25 avril 2012 à 14:44 - Dernière réponse : dElwinn
Messages postés
11
Date d'inscription
jeudi 10 novembre 2011
Dernière intervention
27 avril 2012
- 26 avril 2012 à 17:34
Bonjour,

Je sollicite votre intervention pour d'abord vérifier si je suis dans la bonne direction et puis avancer si c'est possible...

Je travaille sur la mise en place d'un moteur de recherche avec un slider permettant à l’internaute de choir un intervalle de valeur. J'utilise pour ce faire le slider range de jquery ui, et il fonctionne.
MAIS :
Je souhaite dans l'idéal que le slider propose les valeurs de 0 à 800 000 puis qu'il yu ai un maxi non défini (pour les + de 800 000). Comme sur ce site.

J'arrive à récupérer en valeur maximal la plus grande valeur de ma base de données, mais ce n'est pas bon dans la mesure où mon slider va de 0 à valeur_max, et non 0 - 800 000 - valeur_max.

Voici mon code JQuery pour le slider :
var prix_max  = parseInt('<?php echo $prix_max; ?>') ; //j'ai récupéré la valeur max de ma BDD

jQuery(document).ready(function($){
    // Création d'un slider dans l'élément id slider_prix
    $("#slider_prix").slider({
        range:  true,
        min:   0,               // valeur min
        max:   prix_max,          // valeur max
step:  100000,   // intervalle
        values: [0, 800000],  // position des 2 curseurs à l'initialisation
         
        // Action à effectuer lorsqu'on déplace l'un des curseur
        slide: function(event, ui){
        if (ui.value == $(this).slider('option', 'max'))  
{
            // j'indique que lorsqu'on arrive au bout du slider on indique 'Maxi'
            $(ui.handle).html('Maxi');
            $('#sliderValue').val('prix_max');
        } 
   else
   	$(ui.handle).html(ui.value);


            $('#prix_min').html(ui.values[0]);
            $('#prix_max').html(ui.values[1]);			
    document.getElementById("le_prix_min").value=ui.values[0];
    document.getElementById("le_prix_max").value=ui.values[1];
        }
    });
     
    // Initialisation des valeurs numériques au chargement de la page
    $('#prix_min').html($("#slider_prix").slider("values", 0));
    $('#prix_max').html($("#slider_prix").slider("values", 1));	
});


je ne vous montre pas le reste du code sauf si vous pensez que c'est utile...
J'ai trouvé cette discussion mais je ne saisis pas tout et ne suis pas certaine que cela convienne...

[b]Ma question :
Est-il possible de faire ce que je souhaite et comment m'y prendre?/b

Merci d'avance en tout cas!
Afficher la suite 

Votre réponse

1 réponse

Meilleure réponse
dElwinn
Messages postés
11
Date d'inscription
jeudi 10 novembre 2011
Dernière intervention
27 avril 2012
- 26 avril 2012 à 17:34
3
Merci
Bonjour !

Affaire résolue, je poste le code, si jamais cela peut aider quelqu'un...

Le principe :
- J'extrait la valeur la plus haute de la base de données et je la place dans une variable javascript.
- Je défini une valeur maximale légèrement supérieur à ma valeur maximale souhaitée (ici 800 000)
- Lorsque je bouge la poignée et que je dépasse le seuil des 800 000, je remplace la valeur par la variable javascript précédemment créé, et j'affiche Maxi sur la poignée.

<?php
    //connexion
$AccesBase = mysql_connect($host,$Login,$Pass) or die ("Erreur : ".mysql_error() );
mysql_select_db($DB,$AccesBase) or die ("Erreur : ".mysql_error() );

    //récupération de la valeur maximale du paramètre
$sql2="SELECT MAX(champ) FROM table";
$res2=mysql_query($sql2);
$ma_variable=mysql_result($res2,0,"max(champ)"); 		
?>


<script language="Javascript" type="text/JavaScript">

//recup du prix le plus élevé de la base de données
var ma_variable= parseInt('<?php echo $ma_variable; ?>') ;

jQuery(document).ready(function($){
    // Création d'un slider dans l'élément id id_slider
   $("#id_slider").slider({
        range:  true,
        min:   0,               // valeur min
        max:   845000,        // valeur max
step:  20000,		// intervalle
        values: [0, 800000],  // position des 2 curseurs à l'initialisation
         
        // Action à effectuer lorsqu'on déplace l'un des curseurs
        slide: function(event, ui)
{		
            $('#param_min').html(ui.values[0]);
            $('#param_max').html(ui.values[1]);

//si la valeur maximale est au maximum ou > à 800 000 on la remplace par la valeur de ma_variable et on affiche Maxi	
if (ui.values[1] == $(this).slider('option', 'max')) 
{
$('#param_max').html(ma_variable);
$(ui.handle).html('Maxi');

                                //on transfère les données dans un input type text qui passera les données à la validation du formulaire
        $('#id_input_max').html('#prix_max');	
        document.getElementById("id_input_min").value=ui.values[0];
        document.getElementById("id_input_max").value=$('#param_max').html();
}		
else
{	
//rien n'est indiqué sur la poignée		
$(ui.handle).html('');		
                                //on transfère les données sans modification dans des input type text qui passeront les données à la validation du formulaire.
document.getElementById("id_input_min").value=ui.values[0];
document.getElementById("id_input_max").value=ui.values[1];
}
}
    });
     
    // Initialisation des valeurs numériques au chargement de la page
    $('#param_min').html($("#id_slider").slider("values", 0));
    $('#param_max').html($("#id_slider").slider("values", 1));	
});

Merci dElwinn 3

Avec quelques mots c'est encore mieux Ajouter un commentaire

Codes Sources a aidé 94 internautes ce mois-ci

Commenter la réponse de dElwinn

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.