---
title: "Range slider"
date: "2023-10-05T01:25:30+00:00"
summary: "Enhance your forms with our customizable range slider component. Easily integrate, configure, and retrieve values using JSON:API output for seamless form field management and improved user experience."
image:
type: "page"
url: "/drupal-starter-kits/add-ons/site-studio/range-slider"
id: "289a2add-0738-467f-8ef2-d037ef780ad1"
---

Schema:

    {
      "type": "object",
      "properties": {
        "type": {"type": "string", "pattern": "^form-field$"},
        "id": {"type": "string", "pattern": "^[0-9a-f]{8}-([0-9a-f]{4}-){3}[0-9a-f]{12}$"},
        "machine_name": {"type": "string"},
        "data": {
          "type": "object",
          "properties": {
            "uid": {"type": "string","pattern": "^form-range-slider$"},
            "title": {"type": "string"},
            "value": {"type": "integer"}
          }
        }
      },
      "required": ["id", "type", "data"]
    }
    

Example output:

Given "Range slider" form element on a component set up like so

![adf5bb7e-Screenshot%202023-12-04%20at%2009.30.53.png](https://acquia.widen.net/content/8d640670-3a52-4514-95f9-ab30dec21bfa/web/adf5bb7e-Screenshot%202023-12-04%20at%2009.30.53.png)

And used on Node layout canvas like so

![69b910ef-Screenshot%202023-12-06%20at%2001.08.59.png](https://acquia.widen.net/content/24eb308c-d272-4fb1-a291-a91ac5ddc4c2/web/69b910ef-Screenshot%202023-12-06%20at%2001.08.59.png)

JSON:API output for this form field will be this:

    {
      "type": "form-field",
      "id": "8f7aaefc-b5c7-4f4f-ab2e-7991c8184273",
      "machine_name": "range-slider",
      "data": {
        "uid": "form-range-slider",
        "title": "Range slider",
        "value": 7
      }
    }