sliders-afficher la valeur courante

Version imprimable

26/10/2010, 13h32
Ronin

sliders-afficher la valeur courante

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.
26/10/2010, 20h43
marcha

Salut,

Arrives-tu a poster un exemple minimal ici d'un slider fonctionnel tel
qu'il est actuellement dans ton application ?
27/10/2010, 09h36
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.
27/10/2010, 09h54
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:

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.

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:

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:

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 ???

27/10/2010, 10h17
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.
27/10/2010, 10h31
Ronin

Excuse moi mais je ne cerne pas où je m'exprime mal ?
ce que je ne sais pas "faire" pour dire, c'est comment dans ce slide : function(event,ui){ de l'exemple 1 => qui est mon support de travail, de développement actuellement, appeler une fonction, un argument ou autre qui me permette justement d'afficher sous le curseur un objet html qui affiche l'info,
Il me semble aux vues de ce que contient l'exemple 2 que c'est possible (cf code) en appelant directement des composantes jquery..

Mon problème ne provient pas de la récupération de ces infos c'est plutôt comment je peux l'afficher sous le curseur qui est mobile.
ui-slider contient il se dont j'ai besoin sinon dois-je changer de librairie et utiliser celle de l'exemple 2 ?
Le problème des ressources de l'exemple 2 est qu'elles appellent des champs select et que modifier tous les scripts afin qu'ils réponde la même manière mais à partir de deux champs input => là c'est galère !:aie:
27/10/2010, 16h26
Ronin

??????? 8O
27/10/2010, 16h52
franculo_caoulene

Salut,

Le curseur du slider est représenté par un élément anchor <a>. Avec jquery tu n'as qu'à le retrouver $("#id-slider a") pour y ajouter des éléments <span> avec la méthode append() de jquery par exemple pour y afficher la valeur du curseur au moment de l'événement slide.

C'est justement ce qu'ils font dans le lien que tu nous présente.

Ai-je bien compris ton problème?
27/10/2010, 18h39
Ronin

je te remercie de ta réponse, comme je le précise je débute en jquery et aux vues de l'indentation du code, du point très précis sur lequel je dois intervenir,... +++ je vais tester avec ses éclaircissements et je poste ensuite le résult, en tous cas merci pour vos lumières

Petit code rapide :

Code:

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
29
30
31
32
33
34
35
36
37
38
39
40
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Ajout de la valeur courante au curseur</title>
<link type="text/css" href="libraries/jqueryui/css/ui-lightness/jquery-ui-1.8.5.custom.css" rel="stylesheet" />
<style>
  * {margin:0;padding:0;}
  body {margin:20px;background:#000;color:#ddd;font-size:1em;font-family:Helvetica, Arial, sans-serif;}
  h1 {font-size:1.5em;}
  #s {margin:100px 0 0 0;width:300px;}
  #i {margin:30px 0 0 0;display:block;}
</style>
<head>
<body>
  <h1>Ajout de la valeur courante au curseur</h1>
 
  <div id="s"></div>
 
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js"></script>
  <script>
  function showIndice() {
    //alert($('#s').value);
    $('#i').text($('#s').slider("value"));
  }
  $(function() {
    $('#s').slider({
      orientation: 'horizontal',
      range: 'mini',
      max: 256,
      value: 0,
      slide: showIndice,
      change: showIndice
    });
    $('#s a').append('<span id="i"></span>');
  });
  </script>
</body>
</html>