Slider range avec échelle de lettres

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par poupilou, 28 Mai 2015.

  1. poupilou
    poupilou WRInaute impliqué
    Inscrit:
    9 Février 2004
    Messages:
    860
    J'aime reçus:
    11
    Salut à tous,

    J'essaie de construire un slider range un peu comme ce modèle là http://jqueryui.com/slider/#range mais au lieu d'avoir une échelle de chiffre je voudrais avoir une échelle de lettres (A, B, C, D, E, F, G, H, etc.... jusqu'à Z) mais je n'arrive pas à le faire fonctionner avec des lettres comme échelle, est-ce possible ?

    Voici mon code :
    Code:
    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>jQuery UI Slider - Range slider</title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <link rel="stylesheet" href="/resources/demos/style.css">
    <script>
    $(function() {
    var resChoix = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
        $( "#slider-range" ).slider({
          range: true,
          min: 0,
          max: resChoix.length-1,
          values: [ 4, 10 ],
          slide: function( event, ui ) {
             $( "#choix" ).val( resChoix[ui.values[ 0 ]].toFixed(2) + " \340 " + resChoix[ui.values[ 1 ]].toFixed(2) + "" );
          }
        });
        $( "#choix" ).val( "de " + resChoix[$( "#slider-range" ).slider( "values", 0 )].toFixed(2) + " \340 " + resChoix[$( "#slider-range" ).slider( "values", 1 )].toFixed(2) + "" );
    });
    </script>
    </head>
    <body>
    <p>
    <label for="choix">Choix :</label>
    <input type="text" id="choix" readonly style="border:0; color:#f6931f; font-weight:bold;">
    </p>
    <div id="slider-range"></div>
    </body>
    </html>
    
    Merci pour vos réponses.
     
  2. spout
    spout WRInaute accro
    Inscrit:
    14 Mai 2003
    Messages:
    9 128
    J'aime reçus:
    318
    Je n'ai pas trop compris ce qui ne pas pas chez toi (pas testé), mais j'ai fait un petit test vite fait et ceci fonctionne:
    PHP:
    <span class="syntaxhtml"><span class="syntaxdefault"><br /></span><span class="syntaxkeyword"><!</span><span class="syntaxdefault">doctype html</span><span class="syntaxkeyword">><br /><</span><span class="syntaxdefault">html lang</span><span class="syntaxkeyword">=</span><span class="syntaxstring">"en"</span><span class="syntaxkeyword">><br /><</span><span class="syntaxdefault">head</span><span class="syntaxkeyword">><br /></span><span class="syntaxdefault">  </span><span class="syntaxkeyword"><</span><span class="syntaxdefault">meta charset</span><span class="syntaxkeyword">=</span><span class="syntaxstring">"utf-8"</span><span class="syntaxkeyword">><br /></span><span class="syntaxdefault">  </span><span class="syntaxkeyword"><</span><span class="syntaxdefault">title</span><span class="syntaxkeyword">></span><span class="syntaxdefault">jQuery UI Slider </span><span class="syntaxkeyword">-</span><span class="syntaxdefault"> Range slider</span><span class="syntaxkeyword"></</span><span class="syntaxdefault">title</span><span class="syntaxkeyword">><br /></span><span class="syntaxdefault">  </span><span class="syntaxkeyword"><</span><span class="syntaxdefault">link rel</span><span class="syntaxkeyword">=</span><span class="syntaxstring">"stylesheet"</span><span class="syntaxdefault"> href</span><span class="syntaxkeyword">=</span><span class="syntaxstring">"//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"</span><span class="syntaxkeyword">><br /></span><span class="syntaxdefault">  </span><span class="syntaxkeyword"><</span><span class="syntaxdefault">script src</span><span class="syntaxkeyword">=</span><span class="syntaxstring">"//code.jquery.com/jquery-1.10.2.js"</span><span class="syntaxkeyword">></span><span class="syntaxdefault"></script><br /></span>  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script><br />  <link rel="stylesheet" href="/resources/demos/style.css"><br />  <script><br />  $(function() {<br />      <br />    var resChoix = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];<br />      <br />    $( "#slider-range" ).slider({<br />      range: true,<br />      min: 0,<br />      max: resChoix.length - 1,<br />      values: [ 4, 10 ],<br />      slide: function( event, ui ) {<br />        $( "#amount" ).val( resChoix[ui.values[ 0 ]] + " - " + resChoix[ui.values[ 1 ]] );<br />      }<br />    });<br />    $( "#amount" ).val(resChoix[$( "#slider-range" ).slider( "values", 0 )] + " - " + resChoix[$( "#slider-range" ).slider( "values", 1 )] );<br />  });<br />  </script><br /></head><br /><body><br /> <br /><p><br />  <label for="amount">Price range:</label><br />  <input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;"><br /></p><br /> <br /><div id="slider-range"></div><br /> <br /> <br /></body><br /></html><br /></span>
    Demo: -http://goo.gl/fsCXUH

    Edit: J'ai testé ton code, l'erreur est affichée clairement dans la console:
    Code:
    Uncaught TypeError: resChoix[$(...).slider(...)].toFixed is not a function
     
  3. poupilou
    poupilou WRInaute impliqué
    Inscrit:
    9 Février 2004
    Messages:
    860
    J'aime reçus:
    11
    Ah vraiment un grand merci Spout, ton code marche nickel :D

    Tu me sort vraiment une épine du pied :mrgreen:
     
Chargement...
Similar Threads - Slider range échelle Forum Date
Slider range jquery + keyup fonction Développement d'un site Web ou d'une appli mobile 26 Février 2018
Bien baliser une page d'accueil avec un slider Rédaction web et référencement 28 Mai 2018
Poids du contenu dans les sliders en mobile Débuter en référencement 7 Avril 2017
Mon slider ne s'affiche pas Développement d'un site Web ou d'une appli mobile 12 Mars 2015
Affichage d'image dans un slider Développement d'un site Web ou d'une appli mobile 18 Février 2015
Slider wd pour wordpress Développement d'un site Web ou d'une appli mobile 16 Décembre 2014
Redimensionner un Slider Développement d'un site Web ou d'une appli mobile 7 Mai 2013
Wordpress 3.5.1 et thème " photogra 1.2.3 " Problème slider background Développement d'un site Web ou d'une appli mobile 15 Avril 2013
Balise h1 dans slider Javascript , Conseillé ou pas ? Débuter en référencement 9 Février 2013
Cherche slider particulier Développement d'un site Web ou d'une appli mobile 3 Novembre 2012