{
  "extractedAt": "2026-06-09T05:12:17.530Z",
  "figmaFileKey": "YbsPRUVmNdsbN40NNwh1Gn",
  "figmaName": "Slider",
  "nodeId": "4934:7206",
  "type": "COMPONENT_SET",
  "pageId": "4265:5942",
  "pageName": "— — Other Components",
  "description": "Slider with track, fill, thumb, and value label. theme(dark/light) × size(M/S).",
  "key": "2149180486c7dd22458d5f6c101b7637b5c7769b",
  "variants": [
    {
      "id": "4934:7182",
      "name": "theme=dark, size=M",
      "type": "COMPONENT",
      "visible": true,
      "opacity": 1,
      "blendMode": "PASS_THROUGH",
      "h": 16,
      "w": 240,
      "x": 11420,
      "y": 63,
      "pH": null,
      "pV": null,
      "pR": null,
      "pB": null,
      "gap": 8,
      "r": null,
      "layoutMode": "HORIZONTAL",
      "layoutSizingHorizontal": "FIXED",
      "layoutSizingVertical": "FIXED",
      "primaryAxisSizingMode": "FIXED",
      "counterAxisSizingMode": "FIXED",
      "subnodeCount": 2,
      "primaryAxisAlignItems": null,
      "counterAxisAlignItems": "CENTER",
      "fills": [
        {
          "type": "SOLID",
          "visible": true,
          "opacity": 0,
          "blendMode": "NORMAL",
          "hex": "#000000"
        }
      ],
      "strokes": [],
      "strokeWeight": 1,
      "effects": [],
      "text": {
        "characters": "60",
        "visible": true,
        "opacity": 1,
        "blendMode": "PASS_THROUGH",
        "size": 14,
        "fontFamily": "Roboto",
        "fontWeight": 400,
        "lineHeightPx": 21,
        "letterSpacing": 0,
        "textCase": null,
        "textDecoration": null,
        "fills": [
          {
            "type": "SOLID",
            "visible": true,
            "opacity": 1,
            "blendMode": "NORMAL",
            "hex": "#cccccc",
            "v": "VariableID:VariableID:b35edd8cd173ead8f0ac251b3f00a9ec9a7b61f4/3010:117",
            "token": {
              "cssVar": "--color-grey-5",
              "figmaName": null,
              "variableId": "VariableID:b35edd8cd173ead8f0ac251b3f00a9ec9a7b61f4/3010:117",
              "strategy": "direct-variable-id-map"
            }
          }
        ],
        "v": null,
        "compositeToken": null
      },
      "vectorNodeIds": [],
      "children": [
        {
          "id": "4934:7183",
          "name": "Frame",
          "type": "FRAME",
          "visible": true,
          "opacity": 1,
          "w": 196,
          "h": 8,
          "x": 11420,
          "y": 67,
          "r": 20,
          "fills": [
            {
              "type": "SOLID",
              "visible": true,
              "opacity": 1,
              "blendMode": "NORMAL",
              "hex": "#262626",
              "v": "VariableID:VariableID:93476370766e7edf391998c8568deada1951f9e6/4684:3",
              "token": {
                "cssVar": "--bg-layer3",
                "figmaName": "Color Type/Background/Layer_3",
                "variableId": "VariableID:93476370766e7edf391998c8568deada1951f9e6/4684:3",
                "strategy": "hex-fallback"
              }
            }
          ],
          "strokes": [],
          "children": [
            {
              "id": "4934:7184",
              "name": "Frame",
              "type": "FRAME",
              "visible": true,
              "opacity": 1,
              "w": 118,
              "h": 8,
              "x": 11420,
              "y": 67,
              "r": 20,
              "fills": [
                {
                  "type": "SOLID",
                  "visible": true,
                  "opacity": 1,
                  "blendMode": "NORMAL",
                  "hex": "#2fb54e",
                  "v": "VariableID:VariableID:ea8c23833b46a0c9905a5aed05bf668593a611ce/3010:102",
                  "token": {
                    "cssVar": "--brand",
                    "figmaName": "UX/Brand/Brand",
                    "variableId": "VariableID:ea8c23833b46a0c9905a5aed05bf668593a611ce/3010:102",
                    "strategy": "hex-fallback"
                  }
                }
              ],
              "strokes": []
            },
            {
              "id": "4934:7185",
              "name": "Frame",
              "type": "FRAME",
              "visible": true,
              "opacity": 1,
              "w": 16,
              "h": 16,
              "x": 11530,
              "y": 63,
              "r": 8,
              "fills": [
                {
                  "type": "SOLID",
                  "visible": true,
                  "opacity": 1,
                  "blendMode": "NORMAL",
                  "hex": "#2fb54e",
                  "v": "VariableID:VariableID:ea8c23833b46a0c9905a5aed05bf668593a611ce/3010:102",
                  "token": {
                    "cssVar": "--brand",
                    "figmaName": "UX/Brand/Brand",
                    "variableId": "VariableID:ea8c23833b46a0c9905a5aed05bf668593a611ce/3010:102",
                    "strategy": "hex-fallback"
                  }
                }
              ],
              "strokes": [],
              "children": [
                {
                  "id": "4934:7186",
                  "name": "Frame",
                  "type": "FRAME",
                  "visible": true,
                  "opacity": 1,
                  "w": 6.400000095367432,
                  "h": 6.400000095367432,
                  "x": 11534.7998046875,
                  "y": 67.80000305175781,
                  "r": 16,
                  "fills": [
                    {
                      "type": "SOLID",
                      "visible": true,
                      "opacity": 1,
                      "blendMode": "NORMAL",
                      "hex": "#ffffff"
                    }
                  ],
                  "strokes": []
                }
              ]
            }
          ]
        },
        {
          "id": "4934:7187",
          "name": "60",
          "type": "TEXT",
          "visible": true,
          "opacity": 1,
          "w": 40,
          "h": 21,
          "x": 11624,
          "y": 60.5,
          "r": null,
          "fills": [
            {
              "type": "SOLID",
              "visible": true,
              "opacity": 1,
              "blendMode": "NORMAL",
              "hex": "#cccccc",
              "v": "VariableID:VariableID:b35edd8cd173ead8f0ac251b3f00a9ec9a7b61f4/3010:117",
              "token": {
                "cssVar": "--color-grey-5",
                "figmaName": null,
                "variableId": "VariableID:b35edd8cd173ead8f0ac251b3f00a9ec9a7b61f4/3010:117",
                "strategy": "direct-variable-id-map"
              }
            }
          ],
          "strokes": [],
          "characters": "60"
        }
      ],
      "description": null,
      "componentSetId": "4934:7206",
      "componentPropertyReferences": null
    },
    {
      "id": "4934:7188",
      "name": "theme=dark, size=S",
      "type": "COMPONENT",
      "visible": true,
      "opacity": 1,
      "blendMode": "PASS_THROUGH",
      "h": 12,
      "w": 240,
      "x": 11700,
      "y": 63,
      "pH": null,
      "pV": null,
      "pR": null,
      "pB": null,
      "gap": 8,
      "r": null,
      "layoutMode": "HORIZONTAL",
      "layoutSizingHorizontal": "FIXED",
      "layoutSizingVertical": "FIXED",
      "primaryAxisSizingMode": "FIXED",
      "counterAxisSizingMode": "FIXED",
      "subnodeCount": 2,
      "primaryAxisAlignItems": null,
      "counterAxisAlignItems": "CENTER",
      "fills": [
        {
          "type": "SOLID",
          "visible": true,
          "opacity": 0,
          "blendMode": "NORMAL",
          "hex": "#000000"
        }
      ],
      "strokes": [],
      "strokeWeight": 1,
      "effects": [],
      "text": {
        "characters": "60",
        "visible": true,
        "opacity": 1,
        "blendMode": "PASS_THROUGH",
        "size": 14,
        "fontFamily": "Roboto",
        "fontWeight": 400,
        "lineHeightPx": 21,
        "letterSpacing": 0,
        "textCase": null,
        "textDecoration": null,
        "fills": [
          {
            "type": "SOLID",
            "visible": true,
            "opacity": 1,
            "blendMode": "NORMAL",
            "hex": "#cccccc",
            "v": "VariableID:VariableID:b35edd8cd173ead8f0ac251b3f00a9ec9a7b61f4/3010:117",
            "token": {
              "cssVar": "--color-grey-5",
              "figmaName": null,
              "variableId": "VariableID:b35edd8cd173ead8f0ac251b3f00a9ec9a7b61f4/3010:117",
              "strategy": "direct-variable-id-map"
            }
          }
        ],
        "v": null,
        "compositeToken": null
      },
      "vectorNodeIds": [],
      "children": [
        {
          "id": "4934:7189",
          "name": "Frame",
          "type": "FRAME",
          "visible": true,
          "opacity": 1,
          "w": 196,
          "h": 4,
          "x": 11700,
          "y": 67,
          "r": 20,
          "fills": [
            {
              "type": "SOLID",
              "visible": true,
              "opacity": 1,
              "blendMode": "NORMAL",
              "hex": "#262626",
              "v": "VariableID:VariableID:93476370766e7edf391998c8568deada1951f9e6/4684:3",
              "token": {
                "cssVar": "--bg-layer3",
                "figmaName": "Color Type/Background/Layer_3",
                "variableId": "VariableID:93476370766e7edf391998c8568deada1951f9e6/4684:3",
                "strategy": "hex-fallback"
              }
            }
          ],
          "strokes": [],
          "children": [
            {
              "id": "4934:7190",
              "name": "Frame",
              "type": "FRAME",
              "visible": true,
              "opacity": 1,
              "w": 118,
              "h": 4,
              "x": 11700,
              "y": 67,
              "r": 20,
              "fills": [
                {
                  "type": "SOLID",
                  "visible": true,
                  "opacity": 1,
                  "blendMode": "NORMAL",
                  "hex": "#2fb54e",
                  "v": "VariableID:VariableID:ea8c23833b46a0c9905a5aed05bf668593a611ce/3010:102",
                  "token": {
                    "cssVar": "--brand",
                    "figmaName": "UX/Brand/Brand",
                    "variableId": "VariableID:ea8c23833b46a0c9905a5aed05bf668593a611ce/3010:102",
                    "strategy": "hex-fallback"
                  }
                }
              ],
              "strokes": []
            },
            {
              "id": "4934:7191",
              "name": "Frame",
              "type": "FRAME",
              "visible": true,
              "opacity": 1,
              "w": 12,
              "h": 12,
              "x": 11812,
              "y": 63,
              "r": 6,
              "fills": [
                {
                  "type": "SOLID",
                  "visible": true,
                  "opacity": 1,
                  "blendMode": "NORMAL",
                  "hex": "#2fb54e",
                  "v": "VariableID:VariableID:ea8c23833b46a0c9905a5aed05bf668593a611ce/3010:102",
                  "token": {
                    "cssVar": "--brand",
                    "figmaName": "UX/Brand/Brand",
                    "variableId": "VariableID:ea8c23833b46a0c9905a5aed05bf668593a611ce/3010:102",
                    "strategy": "hex-fallback"
                  }
                }
              ],
              "strokes": [],
              "children": [
                {
                  "id": "4934:7192",
                  "name": "Frame",
                  "type": "FRAME",
                  "visible": true,
                  "opacity": 1,
                  "w": 4.800000190734863,
                  "h": 4.800000190734863,
                  "x": 11815.599609375,
                  "y": 66.5999984741211,
                  "r": 12,
                  "fills": [
                    {
                      "type": "SOLID",
                      "visible": true,
                      "opacity": 1,
                      "blendMode": "NORMAL",
                      "hex": "#ffffff"
                    }
                  ],
                  "strokes": []
                }
              ]
            }
          ]
        },
        {
          "id": "4934:7193",
          "name": "60",
          "type": "TEXT",
          "visible": true,
          "opacity": 1,
          "w": 40,
          "h": 21,
          "x": 11904,
          "y": 58.5,
          "r": null,
          "fills": [
            {
              "type": "SOLID",
              "visible": true,
              "opacity": 1,
              "blendMode": "NORMAL",
              "hex": "#cccccc",
              "v": "VariableID:VariableID:b35edd8cd173ead8f0ac251b3f00a9ec9a7b61f4/3010:117",
              "token": {
                "cssVar": "--color-grey-5",
                "figmaName": null,
                "variableId": "VariableID:b35edd8cd173ead8f0ac251b3f00a9ec9a7b61f4/3010:117",
                "strategy": "direct-variable-id-map"
              }
            }
          ],
          "strokes": [],
          "characters": "60"
        }
      ],
      "description": null,
      "componentSetId": "4934:7206",
      "componentPropertyReferences": null
    },
    {
      "id": "4934:7194",
      "name": "theme=light, size=M",
      "type": "COMPONENT",
      "visible": true,
      "opacity": 1,
      "blendMode": "PASS_THROUGH",
      "h": 16,
      "w": 240,
      "x": 11420,
      "y": 111,
      "pH": null,
      "pV": null,
      "pR": null,
      "pB": null,
      "gap": 8,
      "r": null,
      "layoutMode": "HORIZONTAL",
      "layoutSizingHorizontal": "FIXED",
      "layoutSizingVertical": "FIXED",
      "primaryAxisSizingMode": "FIXED",
      "counterAxisSizingMode": "FIXED",
      "subnodeCount": 2,
      "primaryAxisAlignItems": null,
      "counterAxisAlignItems": "CENTER",
      "fills": [
        {
          "type": "SOLID",
          "visible": true,
          "opacity": 0,
          "blendMode": "NORMAL",
          "hex": "#000000"
        }
      ],
      "strokes": [],
      "strokeWeight": 1,
      "effects": [],
      "text": {
        "characters": "60",
        "visible": true,
        "opacity": 1,
        "blendMode": "PASS_THROUGH",
        "size": 14,
        "fontFamily": "Roboto",
        "fontWeight": 400,
        "lineHeightPx": 21,
        "letterSpacing": 0,
        "textCase": null,
        "textDecoration": null,
        "fills": [
          {
            "type": "SOLID",
            "visible": true,
            "opacity": 1,
            "blendMode": "NORMAL",
            "hex": "#cccccc",
            "v": "VariableID:VariableID:b35edd8cd173ead8f0ac251b3f00a9ec9a7b61f4/3010:117",
            "token": {
              "cssVar": "--color-grey-5",
              "figmaName": null,
              "variableId": "VariableID:b35edd8cd173ead8f0ac251b3f00a9ec9a7b61f4/3010:117",
              "strategy": "direct-variable-id-map"
            }
          }
        ],
        "v": null,
        "compositeToken": null
      },
      "vectorNodeIds": [],
      "children": [
        {
          "id": "4934:7195",
          "name": "Frame",
          "type": "FRAME",
          "visible": true,
          "opacity": 1,
          "w": 196,
          "h": 8,
          "x": 11420,
          "y": 115,
          "r": 20,
          "fills": [
            {
              "type": "SOLID",
              "visible": true,
              "opacity": 1,
              "blendMode": "NORMAL",
              "hex": "#dbdbdb",
              "v": "VariableID:VariableID:1be5d88a997fd660065bb10f62ca5bd3780bd49d/3010:91"
            }
          ],
          "strokes": [],
          "children": [
            {
              "id": "4934:7196",
              "name": "Frame",
              "type": "FRAME",
              "visible": true,
              "opacity": 1,
              "w": 118,
              "h": 8,
              "x": 11420,
              "y": 115,
              "r": 20,
              "fills": [
                {
                  "type": "SOLID",
                  "visible": true,
                  "opacity": 1,
                  "blendMode": "NORMAL",
                  "hex": "#2fb54e",
                  "v": "VariableID:VariableID:ea8c23833b46a0c9905a5aed05bf668593a611ce/3010:102",
                  "token": {
                    "cssVar": "--brand",
                    "figmaName": "UX/Brand/Brand",
                    "variableId": "VariableID:ea8c23833b46a0c9905a5aed05bf668593a611ce/3010:102",
                    "strategy": "hex-fallback"
                  }
                }
              ],
              "strokes": []
            },
            {
              "id": "4934:7197",
              "name": "Frame",
              "type": "FRAME",
              "visible": true,
              "opacity": 1,
              "w": 16,
              "h": 16,
              "x": 11530,
              "y": 111,
              "r": 8,
              "fills": [
                {
                  "type": "SOLID",
                  "visible": true,
                  "opacity": 1,
                  "blendMode": "NORMAL",
                  "hex": "#2fb54e",
                  "v": "VariableID:VariableID:ea8c23833b46a0c9905a5aed05bf668593a611ce/3010:102",
                  "token": {
                    "cssVar": "--brand",
                    "figmaName": "UX/Brand/Brand",
                    "variableId": "VariableID:ea8c23833b46a0c9905a5aed05bf668593a611ce/3010:102",
                    "strategy": "hex-fallback"
                  }
                }
              ],
              "strokes": [],
              "children": [
                {
                  "id": "4934:7198",
                  "name": "Frame",
                  "type": "FRAME",
                  "visible": true,
                  "opacity": 1,
                  "w": 6.400000095367432,
                  "h": 6.400000095367432,
                  "x": 11534.7998046875,
                  "y": 115.80000305175781,
                  "r": 16,
                  "fills": [
                    {
                      "type": "SOLID",
                      "visible": true,
                      "opacity": 1,
                      "blendMode": "NORMAL",
                      "hex": "#ffffff"
                    }
                  ],
                  "strokes": []
                }
              ]
            }
          ]
        },
        {
          "id": "4934:7199",
          "name": "60",
          "type": "TEXT",
          "visible": true,
          "opacity": 1,
          "w": 40,
          "h": 21,
          "x": 11624,
          "y": 108.5,
          "r": null,
          "fills": [
            {
              "type": "SOLID",
              "visible": true,
              "opacity": 1,
              "blendMode": "NORMAL",
              "hex": "#cccccc",
              "v": "VariableID:VariableID:b35edd8cd173ead8f0ac251b3f00a9ec9a7b61f4/3010:117",
              "token": {
                "cssVar": "--color-grey-5",
                "figmaName": null,
                "variableId": "VariableID:b35edd8cd173ead8f0ac251b3f00a9ec9a7b61f4/3010:117",
                "strategy": "direct-variable-id-map"
              }
            }
          ],
          "strokes": [],
          "characters": "60"
        }
      ],
      "description": null,
      "componentSetId": "4934:7206",
      "componentPropertyReferences": null
    },
    {
      "id": "4934:7200",
      "name": "theme=light, size=S",
      "type": "COMPONENT",
      "visible": true,
      "opacity": 1,
      "blendMode": "PASS_THROUGH",
      "h": 12,
      "w": 240,
      "x": 11700,
      "y": 111,
      "pH": null,
      "pV": null,
      "pR": null,
      "pB": null,
      "gap": 8,
      "r": null,
      "layoutMode": "HORIZONTAL",
      "layoutSizingHorizontal": "FIXED",
      "layoutSizingVertical": "FIXED",
      "primaryAxisSizingMode": "FIXED",
      "counterAxisSizingMode": "FIXED",
      "subnodeCount": 2,
      "primaryAxisAlignItems": null,
      "counterAxisAlignItems": "CENTER",
      "fills": [
        {
          "type": "SOLID",
          "visible": true,
          "opacity": 0,
          "blendMode": "NORMAL",
          "hex": "#000000"
        }
      ],
      "strokes": [],
      "strokeWeight": 1,
      "effects": [],
      "text": {
        "characters": "60",
        "visible": true,
        "opacity": 1,
        "blendMode": "PASS_THROUGH",
        "size": 14,
        "fontFamily": "Roboto",
        "fontWeight": 400,
        "lineHeightPx": 21,
        "letterSpacing": 0,
        "textCase": null,
        "textDecoration": null,
        "fills": [
          {
            "type": "SOLID",
            "visible": true,
            "opacity": 1,
            "blendMode": "NORMAL",
            "hex": "#cccccc",
            "v": "VariableID:VariableID:b35edd8cd173ead8f0ac251b3f00a9ec9a7b61f4/3010:117",
            "token": {
              "cssVar": "--color-grey-5",
              "figmaName": null,
              "variableId": "VariableID:b35edd8cd173ead8f0ac251b3f00a9ec9a7b61f4/3010:117",
              "strategy": "direct-variable-id-map"
            }
          }
        ],
        "v": null,
        "compositeToken": null
      },
      "vectorNodeIds": [],
      "children": [
        {
          "id": "4934:7201",
          "name": "Frame",
          "type": "FRAME",
          "visible": true,
          "opacity": 1,
          "w": 196,
          "h": 4,
          "x": 11700,
          "y": 115,
          "r": 20,
          "fills": [
            {
              "type": "SOLID",
              "visible": true,
              "opacity": 1,
              "blendMode": "NORMAL",
              "hex": "#dbdbdb",
              "v": "VariableID:VariableID:1be5d88a997fd660065bb10f62ca5bd3780bd49d/3010:91"
            }
          ],
          "strokes": [],
          "children": [
            {
              "id": "4934:7202",
              "name": "Frame",
              "type": "FRAME",
              "visible": true,
              "opacity": 1,
              "w": 118,
              "h": 4,
              "x": 11700,
              "y": 115,
              "r": 20,
              "fills": [
                {
                  "type": "SOLID",
                  "visible": true,
                  "opacity": 1,
                  "blendMode": "NORMAL",
                  "hex": "#2fb54e",
                  "v": "VariableID:VariableID:ea8c23833b46a0c9905a5aed05bf668593a611ce/3010:102",
                  "token": {
                    "cssVar": "--brand",
                    "figmaName": "UX/Brand/Brand",
                    "variableId": "VariableID:ea8c23833b46a0c9905a5aed05bf668593a611ce/3010:102",
                    "strategy": "hex-fallback"
                  }
                }
              ],
              "strokes": []
            },
            {
              "id": "4934:7203",
              "name": "Frame",
              "type": "FRAME",
              "visible": true,
              "opacity": 1,
              "w": 12,
              "h": 12,
              "x": 11812,
              "y": 111,
              "r": 6,
              "fills": [
                {
                  "type": "SOLID",
                  "visible": true,
                  "opacity": 1,
                  "blendMode": "NORMAL",
                  "hex": "#2fb54e",
                  "v": "VariableID:VariableID:ea8c23833b46a0c9905a5aed05bf668593a611ce/3010:102",
                  "token": {
                    "cssVar": "--brand",
                    "figmaName": "UX/Brand/Brand",
                    "variableId": "VariableID:ea8c23833b46a0c9905a5aed05bf668593a611ce/3010:102",
                    "strategy": "hex-fallback"
                  }
                }
              ],
              "strokes": [],
              "children": [
                {
                  "id": "4934:7204",
                  "name": "Frame",
                  "type": "FRAME",
                  "visible": true,
                  "opacity": 1,
                  "w": 4.800000190734863,
                  "h": 4.800000190734863,
                  "x": 11815.599609375,
                  "y": 114.5999984741211,
                  "r": 12,
                  "fills": [
                    {
                      "type": "SOLID",
                      "visible": true,
                      "opacity": 1,
                      "blendMode": "NORMAL",
                      "hex": "#ffffff"
                    }
                  ],
                  "strokes": []
                }
              ]
            }
          ]
        },
        {
          "id": "4934:7205",
          "name": "60",
          "type": "TEXT",
          "visible": true,
          "opacity": 1,
          "w": 40,
          "h": 21,
          "x": 11904,
          "y": 106.5,
          "r": null,
          "fills": [
            {
              "type": "SOLID",
              "visible": true,
              "opacity": 1,
              "blendMode": "NORMAL",
              "hex": "#cccccc",
              "v": "VariableID:VariableID:b35edd8cd173ead8f0ac251b3f00a9ec9a7b61f4/3010:117",
              "token": {
                "cssVar": "--color-grey-5",
                "figmaName": null,
                "variableId": "VariableID:b35edd8cd173ead8f0ac251b3f00a9ec9a7b61f4/3010:117",
                "strategy": "direct-variable-id-map"
              }
            }
          ],
          "strokes": [],
          "characters": "60"
        }
      ],
      "description": null,
      "componentSetId": "4934:7206",
      "componentPropertyReferences": null
    }
  ],
  "tokenizedAt": "2026-06-09T05:12:24.771Z",
  "tokenizationStrategy": "variable-id-first-then-hex-fallback",
  "source": {
    "sourceLayer": "figma-data/raw/components",
    "sourceFile": "figma-data/raw/components/slider__4934_7206.json",
    "rawExtractedAt": "2026-06-09T05:12:17.530Z",
    "rawNodeId": "4934:7206",
    "rawSha256": "c92a43e77c0f1e307403628ef17b997d68fadc98406221956d70c1ebeb1af8d8"
  }
}