Range Slider

Un composant de range slider personnalisé pour Webflow, développé en TypeScript.

Installation

Ajoutez le script suivant dans votre projet/page Webflow :

<script src="https://cdn.jsdelivr.net/npm/@gemeosagency/[email protected]/dist/index.min.js"></script>

Utilisation

Structure HTML

Créez la structure HTML suivante dans votre projet Webflow :

<!-- Container principal -->
<div range-slider="container" 
     range-slider-values="0,25,50,75,100" 
     range-slider-initial-value="25"
     range-slider-format-tooltip="formatPrice"
     range-slider-on-change="handleSliderChange">
  
  <!-- Track (la barre du slider) -->
  <div range-slider="track">
    
    <!-- Fill (la partie remplie) - optionnel -->
    <div range-slider="fill"></div>
    
    <!-- Handle (le curseur) -->
    <div range-slider="handle">
      <!-- Tooltip (affichage de la valeur) - optionnel -->
      <div range-slider="tooltip"></div>
    </div>
    
  </div>
  
  <!-- Input synchronisé - optionnel -->
  <input range-slider="input" type="number" />
  
</div>

Attributs

| Attribut | Description | Exemple | Requis | |----------|-------------|---------|---------| | range-slider="container" | Container principal du slider | <div range-slider="container"> | ✅ | | range-slider="track" | Barre du slider | <div range-slider="track"> | ✅ | | range-slider="handle" | Curseur mobile | <div range-slider="handle"> | ✅ | | range-slider="fill" | Zone remplie | <div range-slider="fill"> | ❌ | | range-slider="tooltip" | Affichage de la valeur | <div range-slider="tooltip"> | ❌ | | range-slider="input" | Input synchronisé | <input range-slider="input"> | ❌ |

Attributs de configuration

| Attribut | Description | Exemple | Défaut | |----------|-------------|---------|---------| | range-slider-values | Valeurs possibles (séparées par virgules) | "0,25,50,75,100" | "0,100" | | range-slider-initial-value | Valeur initiale | "25" | Première valeur | | range-slider-name | Nom unique du slider | "price" | Auto-généré | | range-slider-format-tooltip | Nom de la fonction de formatage | "formatPrice" | Affichage brut | | range-slider-on-change | Nom de la fonction callback individuelle | "handleChange" | Aucune action | | range-slider-on-change-global | Nom de la fonction callback globale | "handleAllSliders" | Aucune action |

Exemple avec plusieurs sliders

<!-- HTML dans Webflow -->

<!-- Slider de prix -->
<div range-slider="container" 
     range-slider-name="price"
     range-slider-values="0,50,100,200,500,1000" 
     range-slider-initial-value="200"
     range-slider-format-tooltip="formatPrice"
     range-slider-on-change-global="handleAllSliders">
  
  <div range-slider="track">
    <div range-slider="fill"></div>
    <div range-slider="handle">
      <div range-slider="tooltip"></div>
    </div>
  </div>
  
  <input range-slider="input" type="number" placeholder="Prix" />
</div>

<!-- Slider de surface -->
<div range-slider="container" 
     range-slider-name="surface"
     range-slider-values="20,40,60,80,120,200" 
     range-slider-initial-value="60"
     range-slider-format-tooltip="formatSurface">
  
  <div range-slider="track">
    <div range-slider="fill"></div>
    <div range-slider="handle">
      <div range-slider="tooltip"></div>
    </div>
  </div>
  
  <input range-slider="input" type="number" placeholder="Surface" />
</div>

<!-- Affichage des résultats -->
<div id="filter-results">
  Prix : 200€ | Surface : 60m²
</div>

// JavaScript à ajouter dans Webflow (Before </body> tag)
<script>
// Fonctions pour formater les tooltips
function formatPrice(value) {
  return value + '€';
}

function formatSurface(value) {
  return value + 'm²';
}

// Fonction callback globale - appelée quand N'IMPORTE QUEL slider change
function handleAllSliders(allValues) {
  console.log('Toutes les valeurs:', allValues);
  // allValues = { price: 200, surface: 60 }
  
  // Mettre à jour l'affichage
  const resultsDisplay = document.getElementById('filter-results');
  if (resultsDisplay) {
    resultsDisplay.textContent = 
      `Prix : ${allValues.price}€ | Surface : ${allValues.surface}m²`;
  }
  
  // Envoyer les filtres à votre API
  // fetchFilteredResults(allValues);
  
  // Analytics
  // analytics.track('filters_changed', allValues);
}

// Fonctions utilitaires pour récupérer les valeurs
function getAllSliderValues() {
  return window.rangeSliders?.values || {};
}

function getSliderValue(name) {
  return window.rangeSliders?.values?.[name];
}

function getSliderInstance(name) {
  return window.rangeSliders?.instances?.[name];
}
</script>

Fonctionnalités

• Sliders multiples : Créez autant de sliders que vous voulez sur une page
• Callback global : Un seul callback reçoit toutes les valeurs en temps réel
• Noms automatiques : Les sliders sans nom reçoivent des identifiants auto-générés
• Glisser-déposer : Déplacez le curseur avec la souris ou le doigt
• Input synchronisé : Tapez directement une valeur dans l'input
• Responsive : S'adapte automatiquement au redimensionnement
• Touch-friendly : Fonctionne sur mobile et tablette
• Valeurs personnalisées : Définissez vos propres paliers de valeurs

Système de noms

• Nom explicite : Utilisez range-slider-name="monSlider" pour nommer un slider
• Auto-génération : Les sliders sans nom reçoivent automatiquement slider-1, slider-2, etc.
• Unicité garantie : Si un nom existe déjà, il sera automatiquement suffixé (slider-1, slider-1-2, etc.)

Accès aux données

Le système maintient un registre global accessible via window.rangeSliders :

// Récupérer toutes les valeurs
const allValues = window.rangeSliders.values; 
// { price: 200, surface: 60 }

// Récupérer une valeur spécifique
const price = window.rangeSliders.values.price;

// Accéder à une instance de slider
const priceSlider = window.rangeSliders.instances.price;
const currentValue = priceSlider.getValue();