## Slider

Permet de sélectionner une valeur au sein d'un intervalle.

### Usage

La valeur est affichée lorsque le slider est utilisé.

:::demo Vous pouvez décider de la valeur initiale en initialisant la variable liée.

```html
<template>
  <div class="block">
    <span class="demonstration">Valeur par défaut</span>
    <el-slider v-model="value1"></el-slider>
  </div>
  <div class="block">
    <span class="demonstration">Valeur initiale personnalisée</span>
    <el-slider v-model="value2"></el-slider>
  </div>
  <div class="block">
    <span class="demonstration">Pas de tooltip</span>
    <el-slider v-model="value3" :show-tooltip="false"></el-slider>
  </div>
  <div class="block">
    <span class="demonstration">Tooltip formatté</span>
    <el-slider v-model="value4" :format-tooltip="formatTooltip"></el-slider>
  </div>
  <div class="block">
    <span class="demonstration">Désactivé</span>
    <el-slider v-model="value5" disabled></el-slider>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        value1: 0,
        value2: 50,
        value3: 36,
        value4: 48,
        value5: 42,
      }
    },
    methods: {
      formatTooltip(val) {
        return val / 100
      },
    },
  }
</script>
```

:::

### Valeurs discrètes

Les valeurs peuvent être discrètes.

:::demo Réglez le pas avec l'attribut `step`. Vous pouvez affiché chaque point grâce à `show-stops`.

```html
<template>
  <div class="block">
    <span class="demonstration">Points absents</span>
    <el-slider v-model="value1" :step="10"> </el-slider>
  </div>
  <div class="block">
    <span class="demonstration">Points affichés</span>
    <el-slider v-model="value2" :step="10" show-stops> </el-slider>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        value1: 0,
        value2: 0,
      }
    },
  }
</script>
```

:::

### Slider avec champ d'input

Vous pouvez afficher un champ d'input synchronisé pour entrer une valeur précise rapidement.

:::demo Ajoutez l'attribut `show-input` pour ajouter le champ à droite du Slider.

```html
<template>
  <div class="block">
    <el-slider v-model="value" show-input> </el-slider>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        value: 0,
      }
    },
  }
</script>
```

:::

### Sélectionner une intervalle

Vous pouvez sélectionner des intervalles de valeurs au lieu d'une valeur unique.

:::demo Ajouter l'attribut `range` active le mode intervalle, ou la valeur sera maintenant un tableau contenant les deux valeurs de l'intervalle.

```html
<template>
  <div class="block">
    <el-slider v-model="value" range show-stops :max="10"> </el-slider>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        value: [4, 8],
      }
    },
  }
</script>
```

:::

### Mode vertical

:::demo Ajoutez l'attribut `vertical` active le mode vertical. Dans ce mode, l'attribut `height` est requis.

```html
<template>
  <div class="block">
    <el-slider v-model="value" vertical height="200px"> </el-slider>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        value: 0,
      }
    },
  }
</script>
```

:::

:::demo Vous pouvez afficher des marqueurs sur le slider grâce à l'attribut `marks`.

```html
<template>
  <div class="block">
    <el-slider v-model="value" range :marks="marks"> </el-slider>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        value: [30, 60],
        marks: {
          0: '0°C',
          8: '8°C',
          37: '37°C',
          50: {
            style: {
              color: '#1989FA',
            },
            label: '50%',
          },
        },
      }
    },
  }
</script>
```

:::

## Attributs

| Attribut              | Description                                                                                                                                      | Type            | Valeurs acceptées             | Défaut |
| --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ | --------------- | ----------------------------- | ------ |
| model-value / v-model | La valeur liée.                                                                                                                                  | number          | —                             | 0      |
| min                   | Valeur minimale.                                                                                                                                 | number          | —                             | 0      |
| max                   | Valeur maximale.                                                                                                                                 | number          | —                             | 100    |
| disabled              | Si le Slider est désactivé.                                                                                                                      | boolean         | —                             | false  |
| step                  | La taille du pas.                                                                                                                                | number          | —                             | 1      |
| show-input            | Si une champ d'input doit être affiché, ne marche que si `range` est `false`.                                                                    | boolean         | —                             | false  |
| show-input-controls   | Si des boutons de contrôle doivent être affichés quand `show-input` est `true`.                                                                  | boolean         | —                             | true   |
| input-size            | Taille du champ d'input.                                                                                                                         | string          | large / medium / small / mini | small  |
| show-stops            | Si les points de valeurs discrètes doivent être affichés.                                                                                        | boolean         | —                             | false  |
| show-tooltip          | Si le tooltip doit être affiché.                                                                                                                 | boolean         | —                             | true   |
| format-tooltip        | Format du contenu du tooltip.                                                                                                                    | function(value) | —                             | —      |
| range                 | Si le mode intervalle est activé.                                                                                                                | boolean         | —                             | false  |
| vertical              | Si le mode vertical est activé.                                                                                                                  | boolean         | —                             | false  |
| height                | Hauteur du Slider, requis en mode vertical.                                                                                                      | string          | —                             | —      |
| label                 | Label pour les lecteurs d'écran.                                                                                                                 | string          | —                             | —      |
| debounce              | Délai après écriture en millisecondes, marche quand `show-input` est `true`.                                                                     | number          | —                             | 300    |
| tooltip-class         | Classe du tooltip.                                                                                                                               | string          | —                             | —      |
| marks                 | Marqueurs, les clés doivent être des `number` et être comprises dans l'intervalle `[min, max]`. Chaque marqueur peut avoir un style particulier. | object          | —                             | —      |

## Évènements

| Nom    | Description                                                                                                                   | Paramètres           |
| ------ | ----------------------------------------------------------------------------------------------------------------------------- | -------------------- |
| change | Se déclenche quand la valeur change (si le changement est fait à la souris, se déclenche quand la souris redevient immobile). | La nouvelle valeur.  |
| input  | triggers when the data changes (It'll be emitted in real time during sliding)                                                 | value after changing |