> For the complete documentation index, see [llms.txt](https://ds5.gitbook.io/documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ds5.gitbook.io/documentation/components/range-slider.md).

# Input de plage

{% hint style="info" icon="figma" %}
Nom du composant : **inputSlider**
{% endhint %}

***

{% embed url="<https://www.figma.com/proto/wBkSm4I4jUASOuNVQr9xA9/DSVUV5---Previews?content-scaling=fixed&hotspot-hints=0&node-id=5976-1696&page-id=5976:1694&scaling=min-zoom&starting-point-node-id=5976:1696&t=OLSnUnpARBHUAYCZ-1&viewport=128,195,0.81>" %}

***

### Principes

#### Précision

Les curseurs doivent permettre un ajustement fin des valeurs. L'affichage numérique associé doit se mettre à jour instantanément pour confirmer la plage sélectionnée.

#### Liberté

L'utilisateur doit pouvoir manipuler les deux bornes indépendamment pour restreindre ou élargir sa recherche.

#### Visualisation

La zone active entre les deux curseurs doit être clairement distinguée de la zone inactive pour symboliser visuellement l'étendue du filtre appliqué.

***

### Usage

Le slider input est utilisé dès qu'une valeur numérique doit être définie en glissant dans un intervalle continu. On le retrouve principalement dans les contextes de filtrage — par exemple un fourchette de prix, une tranche d'âge, une surface en m² — ainsi que dans les configurateurs où l'utilisateur ajuste une valeur entre un minimum et un maximum prédéfinis.

***

### Composant lié

{% content-ref url="/pages/Gatn8zJpYCvrMDzkiA4g" %}
[Input](/documentation/components/action.md)
{% endcontent-ref %}

{% content-ref url="/pages/30r5nOoWKhRAq6EdTSe8" %}
[Input select](/documentation/components/select.md)
{% endcontent-ref %}

{% content-ref url="/pages/X5jVI1da8wv0fY4tcExg" %}
[Bouton](/documentation/components/button.md)
{% endcontent-ref %}