Slider range avec échelle de lettres

poupilou · 28 Mai 2015

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.

spout · 28 Mai 2015

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:

 <!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 ) { $( "#amount" ).val( resChoix[ui.values[ 0 ]] + " - " + resChoix[ui.values[ 1 ]] ); } }); $( "#amount" ).val(resChoix[$( "#slider-range" ).slider( "values", 0 )] + " - " + resChoix[$( "#slider-range" ).slider( "values", 1 )] ); }); </script> </head> <body> <label for="amount">Price range:</label> <input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;"> <div id="slider-range"></div> </body> </html> 

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

poupilou · 28 Mai 2015

Ah vraiment un grand merci Spout, ton code marche nickel

Tu me sort vraiment une épine du pied :mrgreen:

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
Débutante demande aide pour problème avec slider	Développement d'un site Web ou d'une appli mobile	27 Octobre 2012
Dewslider : Probleme de rafraichissement ...	Développement d'un site Web ou d'une appli mobile	1 Août 2012
Créer un slider en HTML ?	Développement d'un site Web ou d'une appli mobile	7 Janvier 2012
Recherche css slider JQuery	Développement d'un site Web ou d'une appli mobile	13 Août 2011
<script> Whois et images/slider incompatibilité?	Développement d'un site Web ou d'une appli mobile	19 Juillet 2011
Aide sur le dewslider de alsacreations	Développement d'un site Web ou d'une appli mobile	2 Juin 2011
Mettre un lien sur une image d'un slider javascript	Développement d'un site Web ou d'une appli mobile	17 Mai 2011
EasySlider	Développement d'un site Web ou d'une appli mobile	16 Mai 2011
Slider Vertical customisé pour formulaire	Développement d'un site Web ou d'une appli mobile	2 Mai 2011
Probleme recup valeur slider jquery ...	Développement d'un site Web ou d'une appli mobile	29 Décembre 2010