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