@rio-cloud/uikit-mcp 1.0.0

package/data/pages/Components/components/sidebar.json

@@ -0,0 +1,243 @@
+{
+  "metadata": {
+    "captured_at": "2025-11-21T12:07:04.302Z",
+    "source": "https://uikit.developers.rio.cloud/#components/sidebar",
+    "category": "Components",
+    "section": "Application",
+    "slug": "components/sidebar",
+    "version": "v1.13.2",
+    "hash_algorithm": "sha256",
+    "hash": "c295797739cf6af5276600c844dea219a288a21a723f1ed6a3dd08b6f68e584e"
+  },
+  "title": "Sidebar",
+  "lead": "There are 2 kinds of Sidebars. The default fluid and the fly variant.",
+  "content": [
+    {
+      "heading": "Sidebar",
+      "body": "Sidebars have to be wrapped in ApplicationLayout.Sidebar and for floating reasons they have to be placed before ApplicationLayout.Body.\n\nYou can add the class right to the ApplicationLayout.Sidebar to have the sidebars rendered on the right side of the screen.\n\nFor more information about the ApplicationLayout see here",
+      "examples": [
+        {
+          "caption": "Example 1",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div class=\"display-flex flex-wrap\"><div class=\"flex-1-1\"><div class=\"h5\">Left sidebars</div><div class=\"form-group\"><label class=\"width-100pct\">Resizable fly Sidebar:</label><button type=\"button\" class=\"btn btn-default btn-toggle btn-component btn btn-default\" tabindex=\"0\">Toggle Sidebar</button></div></div><div class=\"flex-1-1\"><div class=\"h5\">Right sidebars</div><div class=\"form-group\"><label class=\"width-100pct\">Resizable fluid Sidebar with resize limits and custom header button:</label><button type=\"button\" class=\"btn btn-default btn-toggle btn-component btn btn-default\" tabindex=\"0\">Toggle Sidebar</button></div><div class=\"form-group\"><label class=\"width-100pct\">Fly Sidebar which overlays content:</label><button type=\"button\" class=\"btn btn-default btn-toggle btn-component btn btn-default\" tabindex=\"0\">Toggle Sidebar</button></div><div class=\"form-group\"><label class=\"width-100pct\">Fly Sidebar with custom width and visible backdrop:</label><button type=\"button\" class=\"btn btn-default btn-toggle btn-component btn btn-default\" tabindex=\"0\">Toggle Sidebar</button></div><div class=\"form-group\"><label class=\"width-100pct\">Sidebar which switches mode automatically on defined breakpoint between fly and fluid:</label><button type=\"button\" class=\"btn btn-default btn-toggle btn-component btn btn-default\" tabindex=\"0\">Toggle Sidebar</button></div></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import React, { useRef, useState } from 'react';\nimport noop from 'lodash/fp/noop';\n\nimport ApplicationLayout from '@rio-cloud/rio-uikit/ApplicationLayout';\nimport Sidebar from '@rio-cloud/rio-uikit/Sidebar';\nimport Notification from '@rio-cloud/rio-uikit/Notification';\nimport SimpleTooltip from '@rio-cloud/rio-uikit/SimpleTooltip';\nimport Button from '@rio-cloud/rio-uikit/Button';\nimport { dummyTextShort, dummyText, dummyTextLong, dummyTextExtraLong } from '../../../utils/data';\nimport { SidebarDialogExample } from './SidebarDialogExample';\n\nexport type SidebarDemoKey =\n    | 'showSidebarLeft1'\n    | 'showSidebarLeft2'\n    | 'showSidebarRight1'\n    | 'showSidebarRight2'\n    | 'showSidebarRight3'\n    | 'showSidebarRight4';\n\nexport type SidebarDemosProps = Partial<Record<SidebarDemoKey, boolean>> & {\n    toggleSidebar?: (id: SidebarDemoKey) => void;\n};\n\nconst SidebarDemos = (props: SidebarDemosProps) => {\n    const {\n        toggleSidebar = noop,\n        showSidebarLeft1,\n        showSidebarRight1,\n        showSidebarRight2,\n        showSidebarRight3,\n        showSidebarRight4,\n    } = props;\n\n    const bodyRef = useRef<HTMLDivElement>(null);\n\n    return (\n        <>\n            <ApplicationLayout.Sidebar>\n                <Sidebar\n                    headerClassName='test'\n                    showHeaderBorder\n                    title='Sidebar Left'\n                    titleClassName='padding-left-10'\n                    closed={!showSidebarLeft1}\n                    onClose={() => toggleSidebar('showSidebarLeft1')}\n                    footer={\n                        <Button bsStyle={Button.PRIMARY} onClick={() => console.log('hello, world')}>\n                            Button\n                        </Button>\n                    }\n                    resizable\n                    onResizeEnd={() => console.log(bodyRef.current?.scrollWidth)}\n                    minWidth={120}\n                    maxWidth={600}\n                    bodyRef={bodyRef}\n                    position={Sidebar.LEFT}\n                    fly\n                >\n                    <div className='padding-left-20 padding-top-20 padding-right-20'>{dummyTextExtraLong}</div>\n                </Sidebar>\n            </ApplicationLayout.Sidebar>\n\n            <ApplicationLayout.Sidebar className='right'>\n                <Sidebar\n                    title='Sidebar Right'\n                    titleClassName='padding-left-10'\n                    closed={!showSidebarRight1}\n                    onClose={() => toggleSidebar('showSidebarRight1')}\n                    footer={<Button bsStyle={Button.PRIMARY}>Button</Button>}\n                    resizable\n                    enableFullscreenToggle\n                    fullscreenToggleTooltip='Fullscreen'\n                    position={Sidebar.RIGHT}\n                    minWidth={120}\n                    maxWidth={600}\n                    headerButtons={\n                        <>\n                            <SimpleTooltip placement='bottom' content='Download'>\n                                <Button bsStyle={Button.MUTED} iconName='rioglyph-download' iconOnly />\n                            </SimpleTooltip>\n                            <SimpleTooltip placement='bottom' content='Previous Item'>\n                                <Button bsStyle={Button.MUTED} iconName='rioglyph-chevron-left' iconOnly />\n                            </SimpleTooltip>\n                            <SimpleTooltip placement='bottom' content='Next Item'>\n                                <Button bsStyle={Button.MUTED} iconName='rioglyph-chevron-right' iconOnly />\n                            </SimpleTooltip>\n                        </>\n                    }\n                >\n                    <div className='padding-left-20 padding-right-20'>\n                        <DummySidebarTable />\n                    </div>\n                </Sidebar>\n\n                <Sidebar\n                    fly\n                    title='Sidebar Right'\n                    titleClassName='padding-left-10'\n                    closed={!showSidebarRight2}\n                    onClose={() => toggleSidebar('showSidebarRight2')}\n                    footer={<Button bsStyle={Button.PRIMARY}>Button</Button>}\n                >\n                    <div className='padding-left-20 padding-right-20'>\n                        <DummySidebarTable />\n                    </div>\n                </Sidebar>\n\n                <Sidebar\n                    fly\n                    hasBackdrop\n                    makeBackdropVisible\n                    onBackdropClick={() => Notification.info('Sidebar backdrop clicked')}\n                    title='Sidebar Right with backdrop'\n                    titleClassName='padding-left-10'\n                    closed={!showSidebarRight3}\n                    onClose={() => toggleSidebar('showSidebarRight3')}\n                    position={Sidebar.RIGHT}\n                    width={600}\n                    footer={\n                        <Button bsStyle={Button.PRIMARY} onClick={() => toggleSidebar('showSidebarRight3')}>\n                            Close\n                        </Button>\n                    }\n                >\n                    <div className='padding-left-20 padding-right-20'>\n                        <CustomContentExample />\n                    </div>\n                </Sidebar>\n\n                <Sidebar\n                    title='Sidebar Left with dynamic mode'\n                    titleClassName='padding-left-10'\n                    closed={!showSidebarRight4}\n                    onClose={() => toggleSidebar('showSidebarLeft2')}\n                    position={Sidebar.RIGHT}\n                    footer={<Button bsStyle={Button.PRIMARY}>Button</Button>}\n                    switchModeBreakpoint={1100}\n                >\n                    <div className='padding-left-20 padding-right-20'>{dummyTextExtraLong}</div>\n                </Sidebar>\n            </ApplicationLayout.Sidebar>\n        </>\n    );\n};\n\nexport const DummySidebarTable = () => (\n    <table className='table table-condensed'>\n        <thead>\n            <tr>\n                <th className='padding-left-0 width-50pct'>Key</th>\n                <th className='width-50pct'>Value</th>\n            </tr>\n        </thead>\n        <tbody>\n            <tr>\n                <td className='padding-left-0 text-color-dark'>Key</td>\n                <td>Value</td>\n            </tr>\n            <tr>\n                <td className='padding-left-0 text-color-dark'>Key</td>\n                <td>Value</td>\n            </tr>\n            <tr>\n                <td className='padding-left-0 text-color-dark'>Key</td>\n                <td>Value</td>\n            </tr>\n            <tr>\n                <td className='padding-left-0 text-color-dark'>Key</td>\n                <td>Value</td>\n            </tr>\n            <tr>\n                <td className='padding-left-0 text-color-dark'>Key</td>\n                <td>Value</td>\n            </tr>\n        </tbody>\n    </table>\n);\n\nconst CustomContentExample = () => {\n    const [currentContentBlock, setCurrentContentBlock] = useState(0);\n\n    const content = [dummyTextShort, dummyText, dummyTextLong];\n\n    const switchContent = (event: React.MouseEvent<HTMLSpanElement>) => {\n        event.preventDefault();\n        const contentIdAttr = event.currentTarget.getAttribute('data-contentid');\n        if (contentIdAttr) {\n            const contentId = Number.parseInt(contentIdAttr, 10);\n            setCurrentContentBlock(contentId);\n        }\n    };\n\n    return (\n        <div>\n            <ul className='nav nav-pills nav-justified'>\n                <li className={`${currentContentBlock === 0 ? 'active' : ''}`}>\n                    <span data-contentid={0} onClick={switchContent}>\n                        Content Block 1\n                    </span>\n                </li>\n                <li className={`${currentContentBlock === 1 ? 'active' : ''}`}>\n                    <span data-contentid={1} onClick={switchContent}>\n                        Content Block 2\n                    </span>\n                </li>\n                <li className={`${currentContentBlock === 2 ? 'active' : ''}`}>\n                    <span data-contentid={2} onClick={switchContent}>\n                        Content Block 3\n                    </span>\n                </li>\n            </ul>\n            <div className='padding-top-15'>{content[currentContentBlock]}</div>\n            <SidebarDialogExample />\n        </div>\n    );\n};\n\nexport default SidebarDemos;"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div class=\"display-flex flex-wrap\">\n    <div class=\"flex-1-1\">\n        <div class=\"h5\">Left sidebars</div>\n        <div class=\"form-group\">\n            <label class=\"width-100pct\">Resizable fly Sidebar:</label>\n            <button type=\"button\" class=\"btn btn-default btn-toggle btn-component btn btn-default\" tabindex=\"0\">Toggle Sidebar</button>\n        </div>\n    </div>\n    <div class=\"flex-1-1\">\n        <div class=\"h5\">Right sidebars</div>\n        <div class=\"form-group\">\n            <label class=\"width-100pct\">Resizable fluid Sidebar with resize limits and custom header button:</label>\n            <button type=\"button\" class=\"btn btn-default btn-toggle btn-component btn btn-default\" tabindex=\"0\">Toggle Sidebar</button>\n        </div>\n        <div class=\"form-group\">\n            <label class=\"width-100pct\">Fly Sidebar which overlays content:</label>\n            <button type=\"button\" class=\"btn btn-default btn-toggle btn-component btn btn-default\" tabindex=\"0\">Toggle Sidebar</button>\n        </div>\n        <div class=\"form-group\">\n            <label class=\"width-100pct\">Fly Sidebar with custom width and visible backdrop:</label>\n            <button type=\"button\" class=\"btn btn-default btn-toggle btn-component btn btn-default\" tabindex=\"0\">Toggle Sidebar</button>\n        </div>\n        <div class=\"form-group\">\n            <label class=\"width-100pct\">Sidebar which switches mode automatically on defined breakpoint between fly and fluid:</label>\n            <button type=\"button\" class=\"btn btn-default btn-toggle btn-component btn btn-default\" tabindex=\"0\">Toggle Sidebar</button>\n        </div>\n    </div>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": null,
+                  "rows": [
+                    {
+                      "name": "closed",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Defines whether the component is hidden or not."
+                    },
+                    {
+                      "name": "fly",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Defines if the component will overlap the body content."
+                    },
+                    {
+                      "name": "resizable",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Defines whether or not the sidebar is resizable."
+                    },
+                    {
+                      "name": "onResizeEnd",
+                      "type": "Function",
+                      "default": "() => {}",
+                      "description": "Callback for when the resize is done."
+                    },
+                    {
+                      "name": "position",
+                      "type": "String",
+                      "default": "Sidebar.LEFT",
+                      "description": "Tells the sidebar where it is positioned. This will affect the resizing behavior respectively. Possible values are: Sidebar.LEFT, Sidebar.RIGHT or 'left''right'"
+                    },
+                    {
+                      "name": "width",
+                      "type": "Number",
+                      "default": "350",
+                      "description": "Defines the width of the component. The value is set as pixel value as inline style."
+                    },
+                    {
+                      "name": "minWidth",
+                      "type": "Number",
+                      "default": "100",
+                      "description": "Defines the minimum width in px of the component that will take effect when resizing."
+                    },
+                    {
+                      "name": "maxWidth",
+                      "type": "Number",
+                      "default": "800",
+                      "description": "Defines the maximum width in px of the component that will take effect when resizing."
+                    },
+                    {
+                      "name": "switchModeBreakpoint",
+                      "type": "Number",
+                      "default": "0",
+                      "description": "Defines the breakpoint in pixel when the sidebar mode shall be changed. If the window width is lower than the given breakpoint the mode is set to fly. If the window width is higher the mode is set to fluid. This functionality is disabled by default and will be enabled when defining a breakpoint higher than 0."
+                    },
+                    {
+                      "name": "title",
+                      "type": "String / Node",
+                      "default": "",
+                      "description": "Content that will be displayed in the components header."
+                    },
+                    {
+                      "name": "footer",
+                      "type": "String / Node",
+                      "default": "",
+                      "description": "The Footer content. For example a save button."
+                    },
+                    {
+                      "name": "onClose",
+                      "type": "Function",
+                      "default": "() => {}",
+                      "description": "Callback function triggered when clicking the close icon."
+                    },
+                    {
+                      "name": "disableClose",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Hides the close button. This may be used when the sidebar is always visible and may not be closed."
+                    },
+                    {
+                      "name": "openInFullscreen",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Opens Sidebar in fullscreen, means 100vw."
+                    },
+                    {
+                      "name": "onFullScreenChange",
+                      "type": "Function",
+                      "default": "() => {}",
+                      "description": "Callback for when the fullscreen is toggled."
+                    },
+                    {
+                      "name": "enableFullscreenToggle",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Enables the fullscreen functionality and shows the fullscreen toggle."
+                    },
+                    {
+                      "name": "fullscreenToggleTooltip",
+                      "type": "String",
+                      "default": "",
+                      "description": "Translated tooltip text for the fullscreen toggle button."
+                    },
+                    {
+                      "name": "disableEsc",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "By default the fullscreen mode can be left with \"esc\". If this is unwanted it can be disabled."
+                    },
+                    {
+                      "name": "className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes added on the wrapper element."
+                    },
+                    {
+                      "name": "headerClassName",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes added to the Sidebar header."
+                    },
+                    {
+                      "name": "showHeaderBorder",
+                      "type": "Boolean",
+                      "default": "",
+                      "description": "Shows a sidebar header border"
+                    },
+                    {
+                      "name": "titleClassName",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes added to the Sidebar title."
+                    },
+                    {
+                      "name": "bodyClassName",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes added to the Sidebar body."
+                    },
+                    {
+                      "name": "footerClassName",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes added to the Sidebar footer."
+                    },
+                    {
+                      "name": "bodyRef",
+                      "type": "React.MutableRefObject<object>",
+                      "default": "",
+                      "description": "Additional ref added to the Sidebar body."
+                    },
+                    {
+                      "name": "hasBackdrop",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Defined whether or not a backdrop will be rendered behind the Sidebar to avoid clicks outside."
+                    },
+                    {
+                      "name": "hasSmoothScrollbar",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Defined whether or not the UIKIT SmoothScrollbar is active"
+                    },
+                    {
+                      "name": "makeBackdropVisible",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Defined whether or not the backdrop is visible similar to the backdrop for modal dialogs."
+                    },
+                    {
+                      "name": "onBackdropClick",
+                      "type": "Function",
+                      "default": "() => {}",
+                      "description": "Callback for when the backdrop is clicked. This comes in handy when handling transient data from the sidebar which need to be saved first and handle clicks outside."
+                    },
+                    {
+                      "name": "backdropClassName",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes added to the Sidebar backdrop."
+                    },
+                    {
+                      "name": "headerButtons",
+                      "type": "Node",
+                      "default": "",
+                      "description": "Additional buttons to be rendered in the header."
+                    },
+                    {
+                      "name": "children",
+                      "type": "any",
+                      "default": "",
+                      "description": "Any element to be rendered inside the body element."
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "see_also": []
+}

package/data/pages/Components/components/sliders.json

@@ -0,0 +1,235 @@
+{
+  "metadata": {
+    "captured_at": "2025-11-21T12:07:16.592Z",
+    "source": "https://uikit.developers.rio.cloud/#components/sliders",
+    "category": "Components",
+    "section": "Interaction",
+    "slug": "components/sliders",
+    "version": "v1.13.2",
+    "hash_algorithm": "sha256",
+    "hash": "2b6ab899c7d81c0ced1b9839775afb7304eb777ebfafc6523533cf695db5100a"
+  },
+  "title": "Slider",
+  "lead": null,
+  "content": [
+    {
+      "heading": "Slider",
+      "body": "",
+      "examples": [
+        {
+          "caption": "Example 1",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div class=\"form-group\"><label>Standard Slider</label><div class=\"range-slider margin-bottom-20\" style=\"color: var(--brand-primary);\"><div class=\"range-whole-track\"></div><div class=\"range-track\" style=\"width: 20%;\"></div><input class=\"\" min=\"0\" max=\"20\" step=\"1\" type=\"range\" value=\"4\"></div><label>Colored Slider</label><div class=\"range-slider margin-bottom-20\" style=\"color: var(--brand-danger);\"><div class=\"range-whole-track\"></div><div class=\"range-track\" style=\"width: 66%;\"></div><input class=\"\" min=\"0\" max=\"50\" step=\"1\" type=\"range\" value=\"33\"></div><label>Slider with value label</label><div class=\"range-slider show-value-labels margin-bottom-20\" style=\"color: var(--brand-primary);\"><div class=\"range-whole-track\"></div><div class=\"range-track\" style=\"width: 85%;\"><div class=\"range-value\"><span>17</span></div></div><input class=\"\" min=\"0\" max=\"20\" step=\"1\" type=\"range\" value=\"17\"></div><label>Disabled Slider</label><div class=\"range-slider disabled margin-bottom-20\" style=\"color: var(--brand-primary);\"><div class=\"range-whole-track\"></div><div class=\"range-track\" style=\"width: 40%;\"></div><input class=\"\" min=\"0\" max=\"20\" step=\"1\" type=\"range\" value=\"8\"></div><label>Using the onCange callback</label><div class=\"display-flex align-items-center\"><div class=\"range-slider\" style=\"color: var(--brand-primary);\"><div class=\"range-whole-track\"></div><div class=\"range-track\" style=\"width: 13.3333%;\"></div><input class=\"\" min=\"-50\" max=\"1000\" step=\"1\" type=\"range\" value=\"90\"></div><div class=\"width-100 margin-left-10\"><input class=\"form-control text-center no-controls\" type=\"number\" min=\"-50\" max=\"1000\" value=\"90\"></div></div><label>Large value labels and a hidden bar</label><div class=\"display-flex justify-content-center padding-25 margin-top-25\"><div class=\"range-slider show-value-labels hide-value-bar large-value-labels max-width-300\" style=\"color: var(--brand-primary);\"><div class=\"range-whole-track\"></div><div class=\"range-track\" style=\"width: 50%;\"><div class=\"range-value\"><span>50 %</span></div></div><input class=\"\" min=\"0\" max=\"100\" step=\"25\" type=\"range\" value=\"50\"></div></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import { useState } from 'react';\n\nimport Slider from '@rio-cloud/rio-uikit/Slider';\nimport Notification from '@rio-cloud/rio-uikit/Notification';\n\nconst SliderExample = () => {\n    const [value1, setValue1] = useState(4);\n    const [value2, setValue2] = useState(17);\n    const [value3, setValue3] = useState(8);\n    const [value4, setValue4] = useState(90);\n    const [value5, setValue5] = useState(50);\n    const [value6, setValue6] = useState(33);\n\n    return (\n        <div className='form-group'>\n            <label>Standard Slider</label>\n            <Slider\n                className='margin-bottom-20'\n                value={value1}\n                minValue={0}\n                maxValue={20}\n                step={1}\n                onDragEnd={value => {\n                    Notification.info(`New value: ${value}`);\n                    setValue1(value);\n                }}\n            />\n            <label>Colored Slider</label>\n            <Slider\n                className='margin-bottom-20'\n                value={value6}\n                minValue={0}\n                maxValue={50}\n                step={1}\n                color='danger'\n                onDragEnd={value => {\n                    Notification.info(`New value: ${value}`);\n                    setValue6(value);\n                }}\n            />\n            <label>Slider with value label</label>\n            <Slider\n                className='margin-bottom-20'\n                value={value2}\n                minValue={0}\n                maxValue={20}\n                step={1}\n                valueLabels\n                onDragEnd={value => {\n                    Notification.info(`New value: ${value}`);\n                    setValue2(value);\n                }}\n            />\n            <label>Disabled Slider</label>\n            <Slider\n                className='margin-bottom-20'\n                value={value3}\n                minValue={0}\n                maxValue={20}\n                step={1}\n                disabled\n                onDragEnd={value => {\n                    Notification.info(`New value: ${value}`);\n                    setValue3(value);\n                }}\n            />\n            <label>Using the onCange callback</label>\n            <div className='display-flex align-items-center'>\n                <Slider\n                    value={value4}\n                    minValue={-50}\n                    maxValue={1000}\n                    step={1}\n                    onDragEnd={value => {\n                        Notification.info(`New value: ${value}`);\n                    }}\n                    onChange={value => {\n                        setValue4(value);\n                    }}\n                />\n                <div className='width-100 margin-left-10'>\n                    <input\n                        className='form-control text-center no-controls'\n                        type='number'\n                        min={-50}\n                        max={1000}\n                        value={value4}\n                        onChange={event => {\n                            const newValue = !event.target.value ? 0 : Number.parseInt(event.target.value, 10);\n                            setValue4(newValue);\n                        }}\n                    />\n                </div>\n            </div>\n            <label>Large value labels and a hidden bar</label>\n            <div className='display-flex justify-content-center padding-25 margin-top-25'>\n                <Slider\n                    className='max-width-300'\n                    value={value5}\n                    minValue={0}\n                    maxValue={100}\n                    step={25}\n                    hideValueBar\n                    largeValueLabels\n                    valueLabels\n                    valueLabelUnit='%'\n                />\n            </div>\n        </div>\n    );\n};\n\nexport default SliderExample;"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div class=\"form-group\">\n    <label>Standard Slider</label>\n    <div class=\"range-slider margin-bottom-20\" style=\"color: var(--brand-primary);\">\n        <div class=\"range-whole-track\">\n        </div>\n        <div class=\"range-track\" style=\"width: 20%;\">\n        </div>\n        <input class=\"\" min=\"0\" max=\"20\" step=\"1\" type=\"range\" value=\"4\">\n    </div>\n    <label>Colored Slider</label>\n    <div class=\"range-slider margin-bottom-20\" style=\"color: var(--brand-danger);\">\n        <div class=\"range-whole-track\">\n        </div>\n        <div class=\"range-track\" style=\"width: 66%;\">\n        </div>\n        <input class=\"\" min=\"0\" max=\"50\" step=\"1\" type=\"range\" value=\"33\">\n    </div>\n    <label>Slider with value label</label>\n    <div class=\"range-slider show-value-labels margin-bottom-20\" style=\"color: var(--brand-primary);\">\n        <div class=\"range-whole-track\">\n        </div>\n        <div class=\"range-track\" style=\"width: 85%;\">\n            <div class=\"range-value\">\n                <span>17</span>\n            </div>\n        </div>\n        <input class=\"\" min=\"0\" max=\"20\" step=\"1\" type=\"range\" value=\"17\">\n    </div>\n    <label>Disabled Slider</label>\n    <div class=\"range-slider disabled margin-bottom-20\" style=\"color: var(--brand-primary);\">\n        <div class=\"range-whole-track\">\n        </div>\n        <div class=\"range-track\" style=\"width: 40%;\">\n        </div>\n        <input class=\"\" min=\"0\" max=\"20\" step=\"1\" type=\"range\" value=\"8\">\n    </div>\n    <label>Using the onCange callback</label>\n    <div class=\"display-flex align-items-center\">\n        <div class=\"range-slider\" style=\"color: var(--brand-primary);\">\n            <div class=\"range-whole-track\">\n            </div>\n            <div class=\"range-track\" style=\"width: 13.3333%;\">\n            </div>\n            <input class=\"\" min=\"-50\" max=\"1000\" step=\"1\" type=\"range\" value=\"90\">\n        </div>\n        <div class=\"width-100 margin-left-10\">\n            <input class=\"form-control text-center no-controls\" type=\"number\" min=\"-50\" max=\"1000\" value=\"90\">\n        </div>\n    </div>\n    <label>Large value labels and a hidden bar</label>\n    <div class=\"display-flex justify-content-center padding-25 margin-top-25\">\n        <div class=\"range-slider show-value-labels hide-value-bar large-value-labels max-width-300\" style=\"color: var(--brand-primary);\">\n            <div class=\"range-whole-track\">\n            </div>\n            <div class=\"range-track\" style=\"width: 50%;\">\n                <div class=\"range-value\">\n                    <span>50 %</span>\n                </div>\n            </div>\n            <input class=\"\" min=\"0\" max=\"100\" step=\"25\" type=\"range\" value=\"50\">\n        </div>\n    </div>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": null,
+                  "rows": [
+                    {
+                      "name": "value",
+                      "type": "Number",
+                      "default": "0",
+                      "description": "The current value."
+                    },
+                    {
+                      "name": "minValue",
+                      "type": "Number",
+                      "default": "0",
+                      "description": "The lower limit."
+                    },
+                    {
+                      "name": "maxValue",
+                      "type": "Number",
+                      "default": "Number.MAX_VALUE",
+                      "description": "The upper limit."
+                    },
+                    {
+                      "name": "valueLabels",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Whether to show the value labels."
+                    },
+                    {
+                      "name": "largeValueLabels",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Whether to show larger value labels instead of the normal ones."
+                    },
+                    {
+                      "name": "valueLabelUnit",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional unit used for the slider value label."
+                    },
+                    {
+                      "name": "hideValueBar",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Whether to hide the dark-colored value bar."
+                    },
+                    {
+                      "name": "step",
+                      "type": "Number",
+                      "default": "1",
+                      "description": "Selector step value."
+                    },
+                    {
+                      "name": "color",
+                      "type": "String",
+                      "default": "'primary'",
+                      "description": "Defines the color of the slider. Possible values are:'primary', 'secondary', 'info', 'success', 'warning' or 'danger'."
+                    },
+                    {
+                      "name": "disabled",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Disables all pointer-events."
+                    },
+                    {
+                      "name": "onChange",
+                      "type": "(newValue: number) => void",
+                      "default": "() => {}",
+                      "description": "Callback to get the new value every time it changes."
+                    },
+                    {
+                      "name": "onDragEnd",
+                      "type": "(newValue: number) => void",
+                      "default": "() => {}",
+                      "description": "Callback to get the value after the slider ended dragging."
+                    },
+                    {
+                      "name": "className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes to be set on the wrapper element."
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "heading": "RangeSlider",
+      "body": "",
+      "examples": [
+        {
+          "caption": "Example 2",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div class=\"form-group\"><label>Standard RangeSlider</label><div class=\"range-slider margin-bottom-20\" style=\"color: var(--brand-primary);\"><div class=\"range-whole-track\"></div><div class=\"range-track\" style=\"width: 78.0952%; left: 2.85714%;\"></div><input class=\"\" min=\"-50\" max=\"1000\" step=\"1\" type=\"range\" value=\"-20\" style=\"z-index: 5;\"><input class=\"\" min=\"-50\" max=\"1000\" step=\"1\" type=\"range\" value=\"800\" style=\"z-index: 5;\"></div><label>RangeSlider with value labels</label><div class=\"range-slider show-value-labels margin-y-20\" style=\"color: var(--brand-primary);\"><div class=\"range-whole-track\"></div><div class=\"range-track\" style=\"width: 23.8095%; left: 19.0476%;\"><div class=\"user-select-none\"><div class=\"range-value\"><span>150 €</span></div><div class=\"range-value\"><span>400 €</span></div></div></div><input class=\"\" min=\"-50\" max=\"1000\" step=\"2\" type=\"range\" value=\"150\" style=\"z-index: 5;\"><input class=\"\" min=\"-50\" max=\"1000\" step=\"2\" type=\"range\" value=\"400\" style=\"z-index: 5;\"></div><label>Disabled RangeSlider</label><div class=\"range-slider disabled margin-bottom-20\" style=\"color: var(--brand-primary);\"><div class=\"range-whole-track\"></div><div class=\"range-track\" style=\"width: 78.0952%; left: 2.85714%;\"></div><input class=\"\" min=\"-50\" max=\"1000\" step=\"1\" type=\"range\" value=\"-20\" style=\"z-index: 5;\"><input class=\"\" min=\"-50\" max=\"1000\" step=\"1\" type=\"range\" value=\"800\" style=\"z-index: 5;\"></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import React from 'react';\n\nimport RangeSlider from '@rio-cloud/rio-uikit/RangeSlider';\nimport Notification from '@rio-cloud/rio-uikit/Notification';\n\nexport default () => (\n    <div className='form-group'>\n        <label>Standard RangeSlider</label>\n        <RangeSlider\n            className='margin-bottom-20'\n            leftValue={-20}\n            rightValue={800}\n            minValue={-50}\n            maxValue={1000}\n            step={1}\n            onDragEnd={(leftValue, rightValue) => {\n                Notification.info(`Left Value: ${leftValue}, Right value: ${rightValue}`);\n            }}\n        />\n        <label>RangeSlider with value labels</label>\n        <RangeSlider\n            className='margin-y-20'\n            leftValue={150}\n            rightValue={400}\n            minValue={-50}\n            maxValue={1000}\n            valueLabels\n            valueLabelUnit='€'\n            step={2}\n            onDragEnd={(leftValue, rightValue) => {\n                Notification.info(`Left value: ${leftValue}, Right value: ${rightValue}`);\n            }}\n        />\n        <label>Disabled RangeSlider</label>\n        <RangeSlider\n            className='margin-bottom-20'\n            leftValue={-20}\n            rightValue={800}\n            minValue={-50}\n            maxValue={1000}\n            step={1}\n            disabled\n            onDragEnd={(leftValue, rightValue) => {\n                Notification.info(`Left value: ${leftValue}, Right value: ${rightValue}`);\n            }}\n        />\n    </div>\n);"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div class=\"form-group\">\n    <label>Standard RangeSlider</label>\n    <div class=\"range-slider margin-bottom-20\" style=\"color: var(--brand-primary);\">\n        <div class=\"range-whole-track\">\n        </div>\n        <div class=\"range-track\" style=\"width: 78.0952%; left: 2.85714%;\">\n        </div>\n        <input class=\"\" min=\"-50\" max=\"1000\" step=\"1\" type=\"range\" value=\"-20\" style=\"z-index: 5;\">\n        <input class=\"\" min=\"-50\" max=\"1000\" step=\"1\" type=\"range\" value=\"800\" style=\"z-index: 5;\">\n    </div>\n    <label>RangeSlider with value labels</label>\n    <div class=\"range-slider show-value-labels margin-y-20\" style=\"color: var(--brand-primary);\">\n        <div class=\"range-whole-track\">\n        </div>\n        <div class=\"range-track\" style=\"width: 23.8095%; left: 19.0476%;\">\n            <div class=\"user-select-none\">\n                <div class=\"range-value\">\n                    <span>150 €</span>\n                </div>\n                <div class=\"range-value\">\n                    <span>400 €</span>\n                </div>\n            </div>\n        </div>\n        <input class=\"\" min=\"-50\" max=\"1000\" step=\"2\" type=\"range\" value=\"150\" style=\"z-index: 5;\">\n        <input class=\"\" min=\"-50\" max=\"1000\" step=\"2\" type=\"range\" value=\"400\" style=\"z-index: 5;\">\n    </div>\n    <label>Disabled RangeSlider</label>\n    <div class=\"range-slider disabled margin-bottom-20\" style=\"color: var(--brand-primary);\">\n        <div class=\"range-whole-track\">\n        </div>\n        <div class=\"range-track\" style=\"width: 78.0952%; left: 2.85714%;\">\n        </div>\n        <input class=\"\" min=\"-50\" max=\"1000\" step=\"1\" type=\"range\" value=\"-20\" style=\"z-index: 5;\">\n        <input class=\"\" min=\"-50\" max=\"1000\" step=\"1\" type=\"range\" value=\"800\" style=\"z-index: 5;\">\n    </div>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": null,
+                  "rows": [
+                    {
+                      "name": "leftValue",
+                      "type": "Number",
+                      "default": "",
+                      "description": "The current left value of the selected range."
+                    },
+                    {
+                      "name": "rightValue",
+                      "type": "Number",
+                      "default": "",
+                      "description": "The current right value of the selected range."
+                    },
+                    {
+                      "name": "minValue",
+                      "type": "Number",
+                      "default": "0",
+                      "description": "The lower limit."
+                    },
+                    {
+                      "name": "maxValue",
+                      "type": "Number",
+                      "default": "Number.MAX_VALUE",
+                      "description": "The upper limit."
+                    },
+                    {
+                      "name": "valueLabels",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Whether to show the value labels."
+                    },
+                    {
+                      "name": "valueLabelUnit",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional unit used for the slider value label."
+                    },
+                    {
+                      "name": "step",
+                      "type": "Number",
+                      "default": "1",
+                      "description": "Selector step value."
+                    },
+                    {
+                      "name": "color",
+                      "type": "String",
+                      "default": "'primary'",
+                      "description": "Defines the color of the slider. Possible values are:'primary', 'secondary', 'info', 'success', 'warning' or 'danger'."
+                    },
+                    {
+                      "name": "disabled",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Disables all pointer-events."
+                    },
+                    {
+                      "name": "onChange",
+                      "type": "(newLeft: number, newRight: number) => void",
+                      "default": "() => {}",
+                      "description": "Callback to get the new value every time it changes."
+                    },
+                    {
+                      "name": "onDragEnd",
+                      "type": "(newLeft: number, newRight: number) => void",
+                      "default": "() => {}",
+                      "description": "Callback to get the value after the slider ended dragging."
+                    },
+                    {
+                      "name": "className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes to be set on the wrapper element."
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "see_also": []
+}