{"componentChunkName":"component---src-pages-components-slider-style-mdx","path":"/components/slider/style/","webpackCompilationHash":"9a5cb62a61994334ab3f","result":{"pageContext":{"isCreatedByStatefulCreatePages":true,"frontmatter":{"title":"Slider","description":"Sliders provide a visual indication of adjustable content, where the user can move the handle along a horizontal track to increase or decrease the value.","tabs":["Code","Usage","Style"]},"relativePagePath":"/components/slider/style.mdx","titleType":"prepend","MdxNode":{"id":"04aeca61-4b57-536b-b233-10a99096e6ff","children":[],"parent":"514a44c6-248e-58c0-bee2-6895960c708d","internal":{"content":"---\ntitle: Slider\ndescription: Sliders provide a visual indication of adjustable content, where the user can move the handle along a horizontal track to increase or decrease the value.\ntabs: ['Code', 'Usage', 'Style']\n---\n\n## Color\n\n| Class                       | Property         | Color token |\n| --------------------------- | ---------------- | ----------- |\n| `.bx--slider__thumb`        | fill             | `$ui-05`    |\n| `.bx--slider__filled-track` | background-color | `$ui-05`    |\n| `.bx--slider__track`        | background-color | `$ui-03`    |\n| `.bx--label`                | text color       | `$text-02`  |\n| `.bx--slider__range-label`  | text color       | `$text-01`  |\n\n### Interactive states\n\n| Class                              | Property         | Color token       |\n| ---------------------------------- | ---------------- | ----------------- |\n| `.bx--slider__thumb:focus`         | border           | `$focus`          |\n| `.bx--slider__thumb:active`        | fill             | `$interactive-04` |\n| `.bx--slider__filled-track:active` | background-color | `$interactive-04` |\n| `.bx--label:disabled`              | text color       | `$disabled-02`    |\n| `.bx--slider__thumb:disabled`      | fill             | `$disabled-02`    |\n| `.bx--slider__track:disabled`      | background-color | `$disabled-02`    |\n\n## Typography\n\n_Slider_ labels should be set in sentence case, with only the first word in a phrase and any proper nouns capitalized, and no more than three words.\n\n| Class                      | Font-size (px/rem) | Font-weight   | Type token       |\n| -------------------------- | ------------------ | ------------- | ---------------- |\n| `.bx--label`               | 12 / 0.75          | Regular / 400 | `$label-01`      |\n| `.bx--slider__range-label` | 14 / 0.875         | Regular / 400 | `$body-short-01` |\n\n## Structure\n\nThe width of a slider varies based on page content and layout.\n\n| Class                                   | Property                  | px / rem   | Spacing token |\n| --------------------------------------- | ------------------------- | ---------- | ------------- |\n| `.bx--slider__thumb`                    | height, width             | 14 / 0.875 | –             |\n| `.bx--slider__thumb:active`             | height, width             | 20 / 1.25  | –             |\n| `.bx--slider__track`                    | height                    | 4 / 0.25   | –             |\n| `.bx--label`                            | margin-bottom             | 16 / 1     | `$spacing-05` |\n| `.bx--slider__track`                    | margin-left, margin-right | 8 / 0.5    | `$spacing-03` |\n| `.bx--slider__range-label:last-of-type` | margin-right              | 16 / 1     | `$spacing-05` |\n\n<div className=\"image--fixed\">\n\n![Structure and spacing measurements for slider](images/slider-style-1.png)\n\n</div>\n\n### Recommended\n\nThe following specs are not built into the slider component but are recommended by design as the proper sizing for the slider tracking line.\n\n| Class               | Property  | px / rem   | Spacing token |\n| ------------------- | --------- | ---------- | ------------- |\n| `.bx--slider-track` | min-width | 200 / 12.5 | –             |\n| `.bx--slider-track` | max-width | 640 / 40   | –             |\n","type":"Mdx","contentDigest":"5e759885a806cbc0d3ca6ec1a5c6122a","counter":1228,"owner":"gatsby-plugin-mdx"},"frontmatter":{"title":"Slider","description":"Sliders provide a visual indication of adjustable content, where the user can move the handle along a horizontal track to increase or decrease the value.","tabs":["Code","Usage","Style"]},"exports":{},"rawBody":"---\ntitle: Slider\ndescription: Sliders provide a visual indication of adjustable content, where the user can move the handle along a horizontal track to increase or decrease the value.\ntabs: ['Code', 'Usage', 'Style']\n---\n\n## Color\n\n| Class                       | Property         | Color token |\n| --------------------------- | ---------------- | ----------- |\n| `.bx--slider__thumb`        | fill             | `$ui-05`    |\n| `.bx--slider__filled-track` | background-color | `$ui-05`    |\n| `.bx--slider__track`        | background-color | `$ui-03`    |\n| `.bx--label`                | text color       | `$text-02`  |\n| `.bx--slider__range-label`  | text color       | `$text-01`  |\n\n### Interactive states\n\n| Class                              | Property         | Color token       |\n| ---------------------------------- | ---------------- | ----------------- |\n| `.bx--slider__thumb:focus`         | border           | `$focus`          |\n| `.bx--slider__thumb:active`        | fill             | `$interactive-04` |\n| `.bx--slider__filled-track:active` | background-color | `$interactive-04` |\n| `.bx--label:disabled`              | text color       | `$disabled-02`    |\n| `.bx--slider__thumb:disabled`      | fill             | `$disabled-02`    |\n| `.bx--slider__track:disabled`      | background-color | `$disabled-02`    |\n\n## Typography\n\n_Slider_ labels should be set in sentence case, with only the first word in a phrase and any proper nouns capitalized, and no more than three words.\n\n| Class                      | Font-size (px/rem) | Font-weight   | Type token       |\n| -------------------------- | ------------------ | ------------- | ---------------- |\n| `.bx--label`               | 12 / 0.75          | Regular / 400 | `$label-01`      |\n| `.bx--slider__range-label` | 14 / 0.875         | Regular / 400 | `$body-short-01` |\n\n## Structure\n\nThe width of a slider varies based on page content and layout.\n\n| Class                                   | Property                  | px / rem   | Spacing token |\n| --------------------------------------- | ------------------------- | ---------- | ------------- |\n| `.bx--slider__thumb`                    | height, width             | 14 / 0.875 | –             |\n| `.bx--slider__thumb:active`             | height, width             | 20 / 1.25  | –             |\n| `.bx--slider__track`                    | height                    | 4 / 0.25   | –             |\n| `.bx--label`                            | margin-bottom             | 16 / 1     | `$spacing-05` |\n| `.bx--slider__track`                    | margin-left, margin-right | 8 / 0.5    | `$spacing-03` |\n| `.bx--slider__range-label:last-of-type` | margin-right              | 16 / 1     | `$spacing-05` |\n\n<div className=\"image--fixed\">\n\n![Structure and spacing measurements for slider](images/slider-style-1.png)\n\n</div>\n\n### Recommended\n\nThe following specs are not built into the slider component but are recommended by design as the proper sizing for the slider tracking line.\n\n| Class               | Property  | px / rem   | Spacing token |\n| ------------------- | --------- | ---------- | ------------- |\n| `.bx--slider-track` | min-width | 200 / 12.5 | –             |\n| `.bx--slider-track` | max-width | 640 / 40   | –             |\n","fileAbsolutePath":"/tmp/35443907/src/pages/components/slider/style.mdx"}}}}