{
  "$schema": "../manifest.schema.json",
  "schemaVersion": "1.0.0",
  "name": "ds-range",
  "description": "Range slider input component",
  "docUrl": "https://design.soracom.io/design-system/elements/range/",
  "category": "elements",
  "htmlElements": [
    "div"
  ],
  "isWebComponent": false,
  "modifiers": {},
  "structure": {
    "parts": {
      "control": {
        "element": "input",
        "selector": "input[type=\"range\"]",
        "attributes": {
          "type": "range"
        },
        "required": true
      },
      "ticks": {
        "element": "datalist",
        "optional": true,
        "position": [
          "after control"
        ]
      },
      "icon": {
        "element": "i",
        "selector": ".ds-icon",
        "optional": true,
        "repeatable": true
      },
      "action": {
        "element": "button",
        "selector": ".ds-button",
        "optional": true,
        "position": [
          "last"
        ]
      }
    },
    "patterns": {
      "basic": "<div class=\"ds-range\"><input type=\"range\"></div>",
      "ticks": "<div class=\"ds-range\"><span><input type=\"range\" list=\"{id}\"><datalist id=\"{id}\"><option value=\"{value}\">{label}</option></datalist></span></div>",
      "with-icons": "<div class=\"ds-range\"><i class=\"ds-icon {startIcon}\"></i><input type=\"range\"><i class=\"ds-icon {endIcon}\"></i></div>"
    }
  },
  "attributes": {
    "type": {
      "description": "Required native input type for the range control.",
      "values": [
        "range"
      ],
      "default": "range",
      "appliesTo": [
        {
          "part": "control",
          "elements": [
            "input"
          ]
        }
      ]
    },
    "name": {
      "description": "Form field name submitted with the range value.",
      "appliesTo": [
        {
          "part": "control",
          "elements": [
            "input"
          ]
        }
      ]
    },
    "value": {
      "description": "Initial value for the range control.",
      "appliesTo": [
        {
          "part": "control",
          "elements": [
            "input"
          ]
        }
      ]
    },
    "min": {
      "description": "Minimum permitted range value.",
      "appliesTo": [
        {
          "part": "control",
          "elements": [
            "input"
          ]
        }
      ]
    },
    "max": {
      "description": "Maximum permitted range value.",
      "appliesTo": [
        {
          "part": "control",
          "elements": [
            "input"
          ]
        }
      ]
    },
    "step": {
      "description": "Permitted increment between range values.",
      "appliesTo": [
        {
          "part": "control",
          "elements": [
            "input"
          ]
        }
      ]
    },
    "list": {
      "description": "ID of a datalist that supplies tick marks for the range control.",
      "appliesTo": [
        {
          "part": "control",
          "elements": [
            "input"
          ]
        }
      ]
    },
    "disabled": {
      "description": "Disables the range control and applies the SDS disabled appearance.",
      "appliesTo": [
        {
          "part": "control",
          "elements": [
            "input"
          ]
        }
      ]
    }
  },
  "dataAttributes": [],
  "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>"
    }
  ]
}