jQuery simpleUIslider
Un slider de données simple, efficace, rapide à déployer.

Une librairie Javascript librement inspirée de ControlP5 et de noUIslider, moins complète mais beaucoup plus facile à utiliser.

simpleUIslider est particulièrement bien adaptée au bidouillage de sketch P5js... comme par exemple ici.

simpleUIslider marche aussi sur mobile via les touch events.

Télécharger la librairie

Version 1.1 - 02/2022

Installation

Dans le header de votre page HTML :

<link rel="stylesheet" href="css/simpleUIslider.css">
<script type="text/javascript" src="js/simpleUIslider.min.js">

(Vous pouvez aussi copier-coller le CSS dans votre feuille de style, et le modifier librement.)

Il vous faudra ensuite des balises vides à cibler (<div> ou autres) :
simpleUIslider s'occupe de les transformer en sliders
.

<div class="slider1"></div>
<div class="slider2"></div>
<div class="slider3"></div>

ou

<ul>
   <li class="slider1"></li>
   <li class="slider2"></li>
   <li class="slider3"></li>
</ul>

ou toutes autres balises HTML vides.

Plusieurs utilisations possibles :

Piloter une variable globale (avec P5js par ex)

On va tout simplement cibler une variable par son nom (qu'il faudra donc mettre entre guillemets).

// création d'une variable
var rotation = 35;
// création d'un slider associé
$('.slider1').simpleUIslider('rotation', { min: 0, max: 360 });

Piloter la propriété d'un objet

game.score = 35;
$('.slider2').simpleUIslider('score', { context: game, min: 0, max: 100 });

Le paramètre optionnel "context" permet de spécifier le contexte de la variable ciblée.

Piloter une fonction

Vous pourriez vouloir réaliser une action plus complexe que de modifier la valeur d'une variable, et c'est possible !

$('.slider3').simpleUIslider(
   function(val){
      // val représente le nombre renvoyé par le slider
      $('h1').css('font-size', val+'px');
   }, 
   { min: 8, max: 50 }
);

Pilotage par paquet : JSON (usage avancé)

Un cas un peu particulier, mais que je rencontre avec P5js : piloter tout un paquet de variables qu'on a déjà créées.
Dans ce cas c'est pénible de devoir créer une <div> pour chaque variable, et un appel Javascript à simpleUIslider() pour chaque <div>...

Il suffit d'une seule <div> côté HTML :

<div class="sliders"></div>

Un paquet de variables déjà créées en Javascript :

// j'ai déjà créé plein de variables
var rotation = 0;
var largeur = 40;
var hauteur = 20;
var R=255, V=50, B=0;

On peut créer tous les sliders d'un coup avec un Array d'Objets ou de noms de variables :

$('.sliders').simpleUIslider([
   { var: "rotation", min:-360, max:360, step:5 },
   { var: "largeur", min:5, max:200 },
   { var: "hauteur", min:5, max:200 },
   "R", "V", "B" // syntaxe encore plus courte, options par défaut
]);

Comme on peut le voir avec R, V et B, on peut indiquer un nom de variable sans plus de détail.
Les sliders associés auront alors tous les réglages par défaut : ils vaudront entre 0 et 255, ce qui marche très bien pour une couleur par ex.

Pour écrire ce bout de code j'ai tendance à copier-coller le code Javascript de création des variables, et en utilisant la sélection multiple de SublimeText ça va très très vite... (à base de CTRL + D par ex).

Voici un exemple où il aurait été pénible de créer chaque slider 1 par 1.

Indiquer les paramètres en HTML

C'est un peu plus compliqué (attention aux guillemets simples et doubles), mais pratique quand on en a beaucoup à mettre en place et qu'on veut garder le contrôle côté HTML.

<div class="slider" data-slider='{"var":"score", "min":0, "max":100}'></div>
<div class="slider" data-slider='{"var":"taille", "min":8, "max":50, "step":0.1, "name":"Taille de la typo"}'></div>

Puis pour tous les activer d'un coup en Javascript :

$('.slider').simpleUIslider();

Pas possible de piloter une fonction avec cette syntaxe, par contre.

Liste complète des paramètres...

... ainsi que leur valeur par défaut :

Les méthodes de simpleUIslider

Pour une utilisation avancée, vous pouvez garder l'objet slider en mémoire, et agir dessus par la suite :

var slider1 = $('.slider1').simpleUIslider('score', { min: 0, max: 100 });
slider1.set(36); // change manuellement la valeur du slider
slider1.get() // renvoie la valeur actuelle du slider
slider1.kill(); // désactive le slider
slider1.revive(); // réactive le slider

Dans le cas d'une instanciation par paquet, vous obtenez un Array d'objets sliders.