Discussion :

[Ronin]

Bonjour,

Je viens de récupérer "une patate chaude" relative à une modification demandée sur des sliders jquery.
Je suis débutant de chez débutant en jquery... Les sliders en question sont très semblables à ceux que l'on peut voir ici : http://jqueryui.com/demos/slider/#range

On me demande aujourd'hui de modifier ceux ci de sorte que la valeur courante soit présente sous le curseur au clic, comme au survol et lors du déplacement.
En cherchant sur le net j'ai trouvé une ressource proposant quelque chose de très proches du résultat demandé http://www.filamentgroup.com/example..._v2/index.html cependant celle ci ne fonctionne qu'à partir de champs select indiçant chacun des valeurs possibles... je ne dispose pour ma part que du min et du max et ne doit en aucun cas modifier la nature de ces champs!
Je suppose que les js utilisés actuellement sont jquery-ui.min couplé avec un ui.slider.js puis-je obtenir un résultat similaire à partir de ces js ??
Merci de m'éclairer un peu car je ne dispose pas d'une visibilité étendue sur le code et mon rayon d'action pour modifier ces slides est très réduit.

[marcha]

Salut,

Arrives-tu a poster un exemple minimal ici d'un slider fonctionnel tel
qu'il est actuellement dans ton application ?

[Ronin]

?? je ne comprends pas ta question tu veux que je poste un exemple ??

Les deux kit en ligne sont globalement des exemples :
le premier utilisent une borne min et max disponibles sous forme d'input
le second utilise lui deux champs select afin de déterminer les intervalles ainsi que le "pas" entre chaque valeur.

mon "soucis" est simple : j'utilise le premier exemple dans une appli php/mysql...
via ajax je récupère les valeurs de chaque input à savoir le min, le max, la valeurs courante du curseur de gauche et aussi de droite.
A partir de cet exemple je souhaiterai savoir si je peux et comment puis-je sous chaque curseur afficher la valeur courante.

[marcha]

Salut,

Ton problème est essentiellement lié au plugin que tu utilises. Il va
falloir gérer des évènements en fonction du plugin. Par exemple si
c'est le Sider de Jquery.ui il faudra gérer l'event slide (entre autre)

Code :

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

1
2
3
$( ".selector" ).slider({
   slide: function(event, ui) { ... }
});

Ma proposition c'est que tu isoles ta problématique dans un exemple.
ou que tu donne l'url de la page où l'on peut voir le code javascript/html
existant.

[Ronin]

Hum, synthétiquement
Je souhaiterai intégrer l'effet obtenu en survol et en clic de l'exemple 2 sur le slide de l'exemple 1
Les urls sont celles que j'ai posté dans le premier message.
Je ne puis pour des questions de confidentialité poster mes sources

voici par exemple ce que contient le js utilisé dans l'exemple 2 au niveau du slide

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
var sliderOptions = {
        step: 1,
        min: 0,
        orientation: 'horizontal',
        max: selectOptions.length-1,
        range: selects.length > 1,//multiple select elements = true
        slide: function(e, ui) {//slide function
                var thisHandle = jQuery(ui.handle);
                //handle feedback 
                var textval = ttText(ui.value);
                thisHandle
                    .attr('aria-valuetext', textval)
                    .attr('aria-valuenow', ui.value)
                    .find('.ui-slider-tooltip .ttContent')
                        .text( textval );
 
                //control original select menu
                var currSelect = jQuery('#' + thisHandle.attr('id').split('handle_')[1]);
                currSelect.find('option').eq(ui.value).attr('selected', 'selected');
        },
        values: (function(){
            var values = [];
            selects.each(function(){
                values.push( jQuery(this).get(0).selectedIndex );
            });
            return values;
        })()
    };

j'en reviens à ma question : comment puis-je et à l'aide de quoi (vu que je débute en JQuery) insérer dans le

Code :

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

 slide : function(event,ui){ ...

pour obtenir au survol et au clic la valeurs courante du curseur gauche et droit, et faire disparaitre cette info sur le mouseout ???

[marcha]

Dans cet exemple, la fonction slide est définie dans sliderOptions

cette fonction est appelée chaque fois que le curseur glisse,
dans textval tu as la valeur actuel. Il te faudra l'afficher dans un
élément html positionné où tu veux.

Je pense qu'en retirant l'option values de sliderOptions, le plugin
devrait se baser sur min, max et step.

à toi de fixer min, max et step aux valeurs qui te convienne.