> For the complete documentation index, see [llms.txt](https://docs.makerobos.com/frontman-enterprise-chatbot-platform/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.makerobos.com/frontman-enterprise-chatbot-platform/story-builder/cards/display-cards/range-slider.md).

# Range Slider

### How it Works?

The Range Slider card allows you to incorporate user input through a visual interface within your stories. Users can select a numerical range to provide specific data.

<figure><img src="https://3746379134-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FamP4egBrOsuezKyj1NQl%2Fuploads%2FyDMNH00fRgOTWTVf1lq6%2Frange%20slider.png?alt=media&amp;token=32a46e56-9b25-46b0-8661-2bee8b3de174" alt=""><figcaption></figcaption></figure>

1. **Trigger Text:** User can add a custom text and it will act as the title of the range slider.

   <figure><img src="https://3746379134-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FamP4egBrOsuezKyj1NQl%2Fuploads%2FRMFsDtuu3MAsFwhq74qp%2Frange%20slider2.png?alt=media&amp;token=6c77ff75-26ab-4c36-9624-09cc0c754138" alt=""><figcaption></figcaption></figure>
2. **Two Slider Types:** Choose between a single slider or a double slider to suit your needs.

   * **Customizable Range:** Set the starting and ending values for the range that users can select from.

   <figure><img src="https://3746379134-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FamP4egBrOsuezKyj1NQl%2Fuploads%2F2IbnSD3f7Uj0Ok3GkV7y%2Fcustomize%20range.png?alt=media&amp;token=6182820d-aa99-42e7-ba6e-eaa08b3fa631" alt=""><figcaption></figcaption></figure>

   * **Single Slider:** Users can choose a specific number within the defined range.

     <figure><img src="https://3746379134-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FamP4egBrOsuezKyj1NQl%2Fuploads%2FQ8VtSmiL7rreR93XBZxl%2Fsingle%20slider.png?alt=media&amp;token=5b662a8e-c86a-4692-9077-9d5f336e1bcd" alt=""><figcaption></figcaption></figure>
   * **Double Slider:** Users can define both the upper and lower limits of their desired range.

     <figure><img src="https://3746379134-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FamP4egBrOsuezKyj1NQl%2Fuploads%2FGWCPRkHmcE6VGcAlCzj7%2Fdouble%20range.png?alt=media&amp;token=379689d0-780f-4c87-8a4a-86b1d9b6389e" alt=""><figcaption></figcaption></figure>
3. **Allow Skip Option:** Provide users with the ability to skip the slider selection if applicable.

   <figure><img src="https://3746379134-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FamP4egBrOsuezKyj1NQl%2Fuploads%2FGXgeeB93hwgUpKqe6aME%2Frange%20skip.png?alt=media&amp;token=e0594b7a-9351-416d-aa32-3ddb96fd4b8e" alt=""><figcaption></figcaption></figure>

   <div align="left"><figure><img src="https://3746379134-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FamP4egBrOsuezKyj1NQl%2Fuploads%2FTcTh8WGCNEhOp0lbgN85%2Fimage.png?alt=media&amp;token=4b7b5c75-edde-41f2-ae0b-bc19c5d284ae" alt="" width="208"><figcaption></figcaption></figure></div>

### **Use Cases:**

* **Price Selection:** Allow users to specify a price range for products or services.
* **Date Range Selection:** Enable users to choose a date range for appointments, bookings, or filters.
* **Numerical Preferences:** Gather user preferences on values within a specific spectrum (e.g., desired temperature setting).
