# Range Slider

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

## Installation

Ajoutez le script suivant dans votre projet/page Webflow :

```html
<script src="https://cdn.jsdelivr.net/npm/@gemeosagency/range-slider@0.1/dist/index.min.js"></script>
```

## Utilisation

### Structure HTML

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

```html
<!-- 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
<!-- 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
// 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` :

```javascript
// 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();
```