{
  "id": "@typed/ui/index#Slider.Slider",
  "canonicalId": "@typed/ui/Slider#Slider",
  "symbol": {
    "id": "@typed/ui/index#Slider.Slider",
    "packageName": "@typed/ui",
    "moduleName": "index",
    "exportName": "Slider.Slider",
    "kind": "function",
    "signatures": [
      "export declare function Slider<const Options extends SliderOptions, const Host extends HostResult = never>(options: Options, host?: Dom.HostOverride<Dom.RenderHostProps<Options, SliderInternalProps<Options>>, \"\", Host>): import(\"./Dom/Types.js\").HostComponent<Options | Host>;"
    ],
    "summary": "Renders a native range input whose input events update numeric state.",
    "sections": {},
    "examples": [
      {
        "language": "ts",
        "code": "import { RefSubject } from \"@typed/fx\";\nimport { html } from \"@typed/template\";\nimport { component } from \"@typed/template\";\nimport * as Slider from \"@typed/ui/Slider\";\n\nexport const ZoomControl = component(function* () {\n  const state = yield* Slider.makeState({ value: 100 });\n  const percentage = RefSubject.map(state, ({ value }) => `${value}%`);\n  return html`<div class=\"zoom-control\">\n    <label for=\"preview-zoom\">Preview zoom</label>\n    ${Slider.Slider({\n      state, min: 50, max: 200, step: 10,\n      props: { id: \"preview-zoom\", name: \"zoom\", \"aria-valuetext\": percentage },\n    })}\n    <output for=\"preview-zoom\">${percentage}</output>\n  </div>`;\n});"
      }
    ],
    "relations": [],
    "source": {
      "file": "packages/ui/src/Slider.ts",
      "line": 159
    },
    "since": "1.0.0",
    "category": "Native controls"
  },
  "exposure": {
    "recordKind": "declaration",
    "id": "@typed/ui/index#Slider.Slider",
    "packageName": "@typed/ui",
    "packageVersion": "1.0.0-beta.13",
    "moduleName": "index",
    "consumerSpecifier": "@typed/ui/index",
    "exportName": "Slider",
    "qualifiedName": "Slider.Slider",
    "declarationKey": "declaration:3cb1115228fa14f781fe782c",
    "family": "function",
    "signatures": [
      "export declare function Slider<const Options extends SliderOptions, const Host extends HostResult = never>(options: Options, host?: Dom.HostOverride<Dom.RenderHostProps<Options, SliderInternalProps<Options>>, \"\", Host>): import(\"./Dom/Types.js\").HostComponent<Options | Host>;"
    ],
    "sourceSpans": [
      {
        "file": "packages/ui/src/Slider.ts",
        "start": {
          "line": 159,
          "column": 1
        },
        "end": {
          "line": 172,
          "column": 2
        }
      }
    ],
    "aliases": [
      "@typed/ui#Slider.Slider",
      "@typed/ui/Slider#Slider"
    ],
    "isAlias": true,
    "parentId": "@typed/ui/index#Slider",
    "static": false,
    "importedFrom": "declaration:3cb1115228fa14f781fe782c"
  },
  "declaration": {
    "declarationKey": "declaration:3cb1115228fa14f781fe782c",
    "name": "Slider",
    "family": "function",
    "facets": [
      {
        "family": "function",
        "syntaxKind": "FunctionDeclaration",
        "signatures": [
          "export declare function Slider<const Options extends SliderOptions, const Host extends HostResult = never>(options: Options, host?: Dom.HostOverride<Dom.RenderHostProps<Options, SliderInternalProps<Options>>, \"\", Host>): import(\"./Dom/Types.js\").HostComponent<Options | Host>;"
        ],
        "typeParameters": [
          "const Options extends SliderOptions",
          "const Host extends HostResult = never"
        ],
        "sourceSpans": [
          {
            "file": "packages/ui/src/Slider.ts",
            "start": {
              "line": 159,
              "column": 1
            },
            "end": {
              "line": 172,
              "column": 2
            }
          }
        ],
        "static": false,
        "readonly": false,
        "optional": false
      }
    ],
    "signatures": [
      "export declare function Slider<const Options extends SliderOptions, const Host extends HostResult = never>(options: Options, host?: Dom.HostOverride<Dom.RenderHostProps<Options, SliderInternalProps<Options>>, \"\", Host>): import(\"./Dom/Types.js\").HostComponent<Options | Host>;"
    ],
    "typeParameters": [
      "const Options extends SliderOptions",
      "const Host extends HostResult = never"
    ],
    "summary": "Renders a native range input whose input events update numeric state.",
    "sections": {},
    "examples": [
      {
        "language": "ts",
        "code": "import { RefSubject } from \"@typed/fx\";\nimport { html } from \"@typed/template\";\nimport { component } from \"@typed/template\";\nimport * as Slider from \"@typed/ui/Slider\";\n\nexport const ZoomControl = component(function* () {\n  const state = yield* Slider.makeState({ value: 100 });\n  const percentage = RefSubject.map(state, ({ value }) => `${value}%`);\n  return html`<div class=\"zoom-control\">\n    <label for=\"preview-zoom\">Preview zoom</label>\n    ${Slider.Slider({\n      state, min: 50, max: 200, step: 10,\n      props: { id: \"preview-zoom\", name: \"zoom\", \"aria-valuetext\": percentage },\n    })}\n    <output for=\"preview-zoom\">${percentage}</output>\n  </div>`;\n});"
      }
    ],
    "sourceSpans": [
      {
        "file": "packages/ui/src/Slider.ts",
        "start": {
          "line": 159,
          "column": 1
        },
        "end": {
          "line": 172,
          "column": 2
        }
      }
    ],
    "since": "1.0.0",
    "category": "Native controls"
  }
}