{
  "element": "nve-range",
  "entrypoint": "@nvidia-elements/core/range/range.examples.json",
  "items": [
    {
      "id": "range",
      "name": "Default",
      "template": "<nve-range>\n  <label>label</label>\n  <input type=\"range\" />\n  <nve-control-message>message</nve-control-message>\n</nve-range>\n",
      "summary": "Basic range component for numeric value selection, providing a simple slider interface for adjusting values within a defined range.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "range-datalist",
      "name": "Datalist",
      "template": "<nve-range>\n  <label>label</label>\n  <input type=\"range\" />\n  <nve-control-message>message</nve-control-message>\n  <datalist>\n    <option value=\"0\">0</option>\n    <option value=\"25\"></option>\n    <option value=\"50\"></option>\n    <option value=\"75\"></option>\n    <option value=\"100\"></option>\n  </datalist>\n</nve-range>\n",
      "summary": "Range with datalist for visual tick marks and labeled values, enabling users to see available options and precisely select predetermined values.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "range-datalist-with-steps",
      "name": "DatalistWithSteps",
      "template": "<nve-range>\n  <label>label</label>\n  <input type=\"range\" min=\"0\" max=\"100\" step=\"10\" />\n  <datalist>\n    <option value=\"0\">0</option>\n    <option value=\"10\">10</option>\n    <option value=\"20\">20</option>\n    <option value=\"30\">30</option>\n    <option value=\"40\">40</option>\n    <option value=\"50\">50</option>\n    <option value=\"60\">60</option>\n    <option value=\"70\">70</option>\n    <option value=\"80\">80</option>\n    <option value=\"90\">90</option>\n    <option value=\"100\">100</option>\n  </datalist>\n</nve-range>\n",
      "summary": "Range with combined step increments and datalist labels, ensuring precise value selection with clear visual indicators at each valid step position.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "range-step",
      "name": "Step",
      "template": "<nve-range>\n  <label>label</label>\n  <input type=\"range\" min=\"0\" max=\"100\" step=\"20\" />\n  <nve-control-message>message</nve-control-message>\n</nve-range>\n",
      "summary": "Range with defined step increments for discrete value selection, constraining the slider to specific intervals for controlled input precision.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "range-vertical",
      "name": "Vertical",
      "template": "<div nve-layout=\"column gap:lg full\">\n  <nve-range>\n    <label>label</label>\n    <input type=\"range\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-range>\n  <nve-range>\n    <label>disabled</label>\n    <input type=\"range\" disabled />\n    <nve-control-message>message</nve-control-message>\n  </nve-range>\n  <nve-range>\n    <label>success</label>\n    <input type=\"range\" />\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-range>\n  <nve-range>\n    <label>error</label>\n    <input type=\"range\" />\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-range>\n</div>\n",
      "summary": "Vertical layout configuration for stacked form arrangements, displaying label, slider, and message in a column format with support for states including disabled, success, and error feedback.",
      "description": "",
      "composition": false,
      "tags": [
        "test-case"
      ]
    },
    {
      "id": "range-horizontal",
      "name": "Horizontal",
      "template": "<div nve-layout=\"column gap:lg full\">\n  <nve-range layout=\"horizontal\">\n    <label>label</label>\n    <input type=\"range\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-range>\n  <nve-range layout=\"horizontal\">\n    <label>disabled</label>\n    <input type=\"range\" disabled />\n    <nve-control-message>message</nve-control-message>\n  </nve-range>\n  <nve-range layout=\"horizontal\">\n    <label>success</label>\n    <input type=\"range\" />\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-range>\n  <nve-range layout=\"horizontal\">\n    <label>error</label>\n    <input type=\"range\" />\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-range>\n</div>\n",
      "summary": "Horizontal layout configuration for inline form arrangements, positioning label and slider side-by-side for compact displays with support for states including disabled, success, and error feedback.",
      "description": "",
      "composition": false,
      "tags": [
        "test-case"
      ]
    },
    {
      "id": "range-orientation-vertical",
      "name": "OrientationVertical",
      "template": "<div style=\"height: 200px\">\n  <nve-range orientation=\"vertical\">\n    <label>label</label>\n    <input type=\"range\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-range>\n</div>\n",
      "summary": "Vertical range slider for space-constrained layouts or controls where bottom-to-top value selection is intuitive, such as volume or equalizer adjustments.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "range-orientation-vertical-datalist",
      "name": "OrientationVerticalDatalist",
      "template": "<div style=\"height: 250px\">\n  <nve-range orientation=\"vertical\">\n    <label>label</label>\n    <input type=\"range\" />\n    <datalist>\n      <option value=\"0\">0</option>\n      <option value=\"25\">25</option>\n      <option value=\"50\">50</option>\n      <option value=\"75\">75</option>\n      <option value=\"100\">100</option>\n    </datalist>\n  </nve-range>\n</div>\n",
      "summary": "Vertical range slider with datalist tick marks and labeled values for precise value selection in vertical layouts.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "range-custom-styles",
      "name": "CustomStyles",
      "template": "<nve-range\n  style=\"\n    --background: #76b900;\n    --track-background: red;\n    --track-height: 4px;\n    --track-border-radius: 16px;\n    --thumb-background: black;\n    --thumb-border: inset 0 0 0 2px white;\n    --thumb-width: 14px;\n    --thumb-height: 14px;\n  \"\n>\n  <input type=\"range\" aria-label=\"range\" />\n</nve-range>\n",
      "summary": "Range component can have its visual styles overwritten to achieve custom themes.",
      "description": "",
      "composition": false,
      "tags": [
        "test-case"
      ]
    }
  ]
}