{
  "name": "ds-range",
  "description": "Range slider input component",
  "docUrl": "https://design.soracom.io/design-system/elements/range/",
  "category": "elements",
  "htmlElements": [
    "div"
  ],
  "isWebComponent": false,
  "modifiers": {},
  "examples": [
    {
      "name": "basic",
      "html": "<div class=\"ds-range\"><input type=\"range\"></div>"
    },
    {
      "name": "withLabel",
      "html": "<label class=\"ds-field\"><div class=\"ds-text --label\">Volume</div><div class=\"ds-range\"><input type=\"range\" min=\"0\" max=\"100\" value=\"50\"></div></label>"
    },
    {
      "name": "with-datalist",
      "html": "<div class=\"ds-range\"><span><input type=\"range\" min=\"0\" max=\"100\" value=\"50\" list=\"range-ticks\" step=\"25\"><datalist id=\"range-ticks\"><option value=\"0\">0</option><option value=\"25\">25</option><option value=\"50\">50</option><option value=\"75\">75</option><option value=\"100\">100</option></datalist></span></div>"
    },
    {
      "name": "disabled",
      "html": "<div class=\"ds-range\"><input type=\"range\" disabled></div>"
    },
    {
      "name": "with-button",
      "html": "<div class=\"ds-range\"><input type=\"range\"><button class=\"ds-button\"><span>Apply</span></button></div>"
    },
    {
      "name": "with-icons",
      "html": "<div class=\"ds-range\"><i class=\"ds-icon --icon-toy-horse --bottom\" data-ds-texttip=\"Slow\"></i><input type=\"range\" min=\"1\" max=\"12\" step=\"1\"><i class=\"ds-icon --icon-rocket --bottom\" data-ds-texttip=\"Fast\"></i></div>"
    }
  ]
}