@tabler/core 1.0.0-beta22 → 1.0.0-beta23

package/docs/ui/components/dropzone.mdx

@@ -1,20 +1,18 @@
 ---
 title: Dropzone
-libs: dropzone
-description: Dropzone is a simple JavaScript library that helps you add file drag and drop functionality to your web forms. It is one of the most popular drag and drop library on the web and is used by millions of people.
+summary: Dropzone is a simple JavaScript library that helps you add file drag and drop functionality to your web forms. It is one of the most popular drag and drop library on the web and is used by millions of people.
+description: Drag-and-drop file upload tool.
 ---
 
 ## Default Dropzone
 
-```html example code vendors height="240px"
+```html example vendors height="240px" libs="dropzone"
 <form class="dropzone" id="dropzone-default" action="." autocomplete="off" novalidate>
   <div class="fallback">
     <input name="file" type="file" />
   </div>
 </form>
 
-<link href="$TABLER_CDN/dist/libs/dropzone/dist/dropzone.css" rel="stylesheet" />
-<script src="$TABLER_CDN/dist/libs/dropzone/dist/dropzone-min.js"></script>
 <script>
   document.addEventListener("DOMContentLoaded", function() {
     new Dropzone("#dropzone-default")
@@ -24,15 +22,13 @@ description: Dropzone is a simple JavaScript library that helps you add file dra
 
 ## Add multiple files
 
-```html example code vendors height="240px"
+```html example vendors height="240px" libs="dropzone"
 <form class="dropzone" id="dropzone-mulitple" action="." autocomplete="off" novalidate>
   <div class="fallback">
     <input name="file" type="file" multiple />
   </div>
 </form>
 
-<link href="$TABLER_CDN/dist/libs/dropzone/dist/dropzone.css" rel="stylesheet" />
-<script src="$TABLER_CDN/dist/libs/dropzone/dist/dropzone-min.js"></script>
 <script>
   document.addEventListener("DOMContentLoaded", function() {
     new Dropzone("#dropzone-mulitple")
@@ -42,7 +38,7 @@ description: Dropzone is a simple JavaScript library that helps you add file dra
 
 ## Custom Dropzone
 
-```html example code vendors height="240px"
+```html example vendors height="240px" libs="dropzone"
 <form class="dropzone" id="dropzone-custom" action="." autocomplete="off" novalidate>
   <div class="fallback">
     <input name="file" type="file" />
@@ -53,8 +49,6 @@ description: Dropzone is a simple JavaScript library that helps you add file dra
   </div>
 </form>
 
-<link href="$TABLER_CDN/dist/libs/dropzone/dist/dropzone.css" rel="stylesheet" />
-<script src="$TABLER_CDN/dist/libs/dropzone/dist/dropzone-min.js"></script>
 <script>
   document.addEventListener("DOMContentLoaded", function() {
     new Dropzone("#dropzone-custom")

package/docs/ui/components/empty.mdx

@@ -1,13 +1,14 @@
 ---
 title: Empty states
-description: Empty states or blank pages are commonly used as placeholders for first-use, empty data or error screens. Their aim is to engage users when there is no content to display and that is why their design is extremely important from the point of view of the user experience of your website or app.
+summary: Empty states or blank pages are commonly used as placeholders for first-use, empty data or error screens. Their aim is to engage users when there is no content to display and that is why their design is extremely important from the point of view of the user experience of your website or app.
+description: Engage users in empty or error screens.
 ---
 
 ## Default markup
 
 Use the default empty state to engage users in the critical moments of their experience with your website or app. A good empty state screen should let users know what is happening and what they should do next as well as encourage them to take action.
 
-```html code example height="300px"
+```html example height="300px"
 <div class="empty">
   <div class="empty-icon">
     <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
@@ -39,9 +40,10 @@ Use the default empty state to engage users in the critical moments of their exp
 
 Make your empty state screen more attractive and engaging by adding an illustration. Thanks to a more personalized design, you will improve your brand image and make your website or app more user friendly.
 
-```html code example height="300px"
+```html example height="300px"
 <div class="empty">
-  <div class="empty-img"><img src="..." height="128" alt="" />
+  <div class="empty-img">
+    <img src="..." height="128" alt="" />
   </div>
   <p class="empty-title">Invoices are managed from here</p>
   <p class="empty-subtitle text-secondary">
@@ -94,7 +96,7 @@ Instead of adding an icon or illustration you can simply give the text:
   </p>
   <div class="empty-action">
     <a href="#" class="btn btn-primary">
-      <!-- SVG icon from http://tabler-icons.io/i/arrow-left -->
+      <!-- SVG icon from http://tabler.io/icons/icon/arrow-left -->
       <svg>...</svg>
       Take me home
     </a>

package/docs/ui/components/icons.mdx

@@ -1,12 +1,13 @@
 ---
 title: Icons
-description: Use one of over 3000 icons created specifically for Tabler and make your dashboard look even more attractive. All icons are under MIT license, so you can use them without any problem both in private and commercial projects.
+summary: Use one of over 3000 icons created specifically for Tabler and make your dashboard look even more attractive. All icons are under MIT license, so you can use them without any problem both in private and commercial projects.
 banner: icons
+description: Enhance dashboards with custom icons.
 ---
 
 ## Base icon
 
-```html code example centered separated
+```html example centered separated
 <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-heart" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
   <path d="M19.5 12.572l-7.5 7.428l-7.5 -7.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572"></path>
@@ -39,7 +40,7 @@ banner: icons
 
 ## Filled icons
 
-```html code example centered separated
+```html example centered separated
 <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-heart-filled" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
   <path d="M6.979 3.074a6 6 0 0 1 4.988 1.425l.037 .033l.034 -.03a6 6 0 0 1 4.733 -1.44l.246 .036a6 6 0 0 1 3.364 10.008l-.18 .185l-.048 .041l-7.45 7.379a1 1 0 0 1 -1.313 .082l-.094 -.082l-7.493 -7.422a6 6 0 0 1 3.176 -10.215z" stroke-width="0" fill="currentColor"></path>
@@ -63,7 +64,7 @@ banner: icons
 
 ## Icon colors
 
-```html example code centered separated
+```html example centered separated
 <span class="text-red">
   <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-heart-filled" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
     <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
@@ -109,12 +110,12 @@ banner: icons
 ```
 
 ```html
-<!-- SVG icon from http://tabler-icons.io/i/heart -->
+<!-- SVG icon from http://tabler.io/icons/icon/heart -->
 <svg class="icon-pulse" ...>...</svg>
 
-<!-- SVG icon from http://tabler-icons.io/i/bell -->
+<!-- SVG icon from http://tabler.io/icons/icon/bell -->
 <svg class="icon-tada" ...>...</svg>
 
-<!-- SVG icon from http://tabler-icons.io/i/rotate-clockwise -->
+<!-- SVG icon from http://tabler.io/icons/icon/rotate-clockwise -->
 <svg class="icon-rotate" ...>...</svg>
 ```

package/docs/ui/components/index.mdx

@@ -0,0 +1,6 @@
+---
+title: Components
+order: 4
+description: Various components to enhance UI.
+summary: Tabler UI includes a variety of components to help you build web applications that are both functional and visually appealing. From buttons and cards to modals and navigation, these components provide a wide range of features to enhance your site.
+---

package/docs/ui/components/inline-player.mdx

@@ -1,12 +1,13 @@
 ---
 title: Inline player
 libs: plyr
-description: A simple, lightweight, accessible and customizable HTML5, YouTube and Vimeo media player that supports modern browsers.
+summary: A simple, lightweight, accessible and customizable HTML5, YouTube and Vimeo media player that supports modern browsers.
+description: Lightweight media player for websites.
 ---
 
 ## Sample demo
 
-```html example code vendors height="500px"
+```html example vendors height="500px" libs="plyr"
 <div id="player-youtube" data-plyr-provider="youtube" data-plyr-embed-id="dQw4w9WgXcQ"></div>
 
 <script src="$TABLER_CDN/dist/libs/plyr/dist/plyr.min.js"></script>
@@ -19,7 +20,7 @@ description: A simple, lightweight, accessible and customizable HTML5, YouTube a
 
 ## Vimeo file
 
-```html example code vendors height="500px"
+```html example vendors height="500px" libs="plyr"
 <div id="player-vimeo" data-plyr-provider="vimeo" data-plyr-embed-id="515937365"></div>
 
 <script src="$TABLER_CDN/dist/libs/plyr/dist/plyr.min.js"></script>

package/docs/ui/components/modals.mdx

@@ -1,11 +1,12 @@
 ---
 title: Modals
-description: Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.
+summary: Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.
+description: Dialogs for notifications and content.
 ---
 
 ## Default markup
 
-```html example code centered height="30rem"
+```html example centered height="30rem"
 <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
   Launch demo modal
 </button>
@@ -31,7 +32,7 @@ description: Use Bootstrap’s JavaScript modal plugin to add dialogs to your si
 
 ## Prompt and alert
 
-```html example code centered height="30rem"
+```html example centered height="30rem"
 <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
   Launch alert modal
 </button>
@@ -53,12 +54,16 @@ description: Use Bootstrap’s JavaScript modal plugin to add dialogs to your si
       <div class="modal-footer">
         <div class="w-100">
           <div class="row">
-            <div class="col"><a href="#" class="btn w-100" data-bs-dismiss="modal">
+            <div class="col">
+              <a href="#" class="btn w-100" data-bs-dismiss="modal">
                 Cancel
-              </a></div>
-            <div class="col"><a href="#" class="btn btn-danger w-100" data-bs-dismiss="modal">
+              </a>
+            </div>
+            <div class="col">
+              <a href="#" class="btn btn-danger w-100" data-bs-dismiss="modal">
                 Delete 84 items
-              </a></div>
+              </a>
+            </div>
           </div>
         </div>
       </div>
@@ -67,7 +72,7 @@ description: Use Bootstrap’s JavaScript modal plugin to add dialogs to your si
 </div>
 ```
 
-```html example code centered height="30rem"
+```html example centered height="30rem"
 <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
   Launch demo modal
 </button>
@@ -109,7 +114,7 @@ description: Use Bootstrap’s JavaScript modal plugin to add dialogs to your si
 
 ## Modal with form
 
-```html example code centered height="30rem"
+```html example centered height="30rem"
 <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
   Launch modal with form
 </button>

package/docs/ui/components/placeholder.mdx

@@ -1,13 +1,14 @@
 ---
 title: Placeholder
-description: Placeholder is used to reserve space for content that soon will appear in a layout.
+summary: Placeholder is used to reserve space for content that soon will appear in a layout.
+description: Reserve space for upcoming content.
 ---
 
 ## Placeholder line
 
 Placeholder lines can contain have lines of text. Their length is different and depends on the `col-` class.
 
-```html code example columns={1}
+```html example columns={1}
 <div class="placeholder col-9"></div>
 <div class="placeholder col-11"></div>
 <div class="placeholder col-10"></div>
@@ -16,7 +17,7 @@ Placeholder lines can contain have lines of text. Their length is different and
 
 However, it may be useful, however, to specify the full width in order to fit the content more effectively.
 
-```html code example columns={1}
+```html example columns={1}
 <div class="placeholder col-12"></div>
 <div class="placeholder col-12"></div>
 <div class="placeholder col-12"></div>
@@ -25,7 +26,7 @@ However, it may be useful, however, to specify the full width in order to fit th
 
 You can also move the lines to right or to center:
 
-```html code example columns={1}
+```html example columns={1}
 <div class="text-end">
   <div class="placeholder col-11"></div>
   <div class="placeholder col-10"></div>
@@ -42,7 +43,7 @@ You can also move the lines to right or to center:
 
 A placeholder can contain also a header element looks like header:
 
-```html code example columns={1}
+```html example columns={1}
 <div class="placeholder col-9 mb-3"></div>
 <div class="placeholder placeholder-xs col-10"></div>
 <div class="placeholder placeholder-xs col-11"></div>
@@ -52,7 +53,7 @@ A placeholder can contain also a header element looks like header:
 
 You can make your placeholder item look like an avatar.
 
-```html code example columns={1}
+```html example columns={1}
 <div class="row">
   <div class="col-auto">
     <div class="avatar placeholder"></div>
@@ -66,7 +67,7 @@ You can make your placeholder item look like an avatar.
 
 The size of avatars is exactly the same as a regular avatar.
 
-```html code example centered separated
+```html example centered separated
 <div class="avatar avatar-xl placeholder"></div>
 <div class="avatar avatar-lg placeholder"></div>
 <div class="avatar avatar-md placeholder"></div>
@@ -81,7 +82,7 @@ You can use a placeholder, which will look like a picture. You can use the `rati
 
 You can also use the `ratio` component, and get the image in the right proportions.
 
-```html code example columns={1} height={500} scrollable
+```html example columns={1} height={500} scrollable
 <div class="ratio ratio-1x1 placeholder">
   <div class="placeholder-image"></div>
 </div>
@@ -129,7 +130,7 @@ By default, the `placeholder` uses `currentColor`. This can be overridden with a
 
 The size of `.placeholders` are based on the typographic style of the parent element. Customize them with sizing modifiers: `.placeholder-lg`, `.placeholder-sm`, or `.placeholder-xs`.
 
-```html code example columns={1}
+```html example columns={1}
 <span class="placeholder col-12 placeholder-lg"></span>
 <span class="placeholder col-12"></span>
 <span class="placeholder col-12 placeholder-sm"></span>
@@ -140,7 +141,7 @@ The size of `.placeholders` are based on the typographic style of the parent ele
 
 Animate placeholders with `.placeholder-glow` or `.placeholder-wave` to better convey the perception of something being actively loaded.
 
-```html code example columns={1}
+```html example columns={1}
 <p class="placeholder-glow">
   <span class="placeholder col-12"></span>
 </p>
@@ -153,7 +154,7 @@ Animate placeholders with `.placeholder-glow` or `.placeholder-wave` to better c
 
 See in the following examples how else you can use the placeholder component
 
-```html code example columns={1} height={1000} separated vertical scrollable
+```html example columns={1} height={1000} separated vertical scrollable
 <div class="card placeholder-glow">
   <div class="ratio ratio-21x9 card-img-top placeholder"></div>
   <div class="card-body">

package/docs/ui/components/popover.mdx

@@ -1,14 +1,15 @@
 ---
 title: Popovers
-description: Popovers are used to provide additional information on elements where a simple tooltip is not sufficient.
+summary: Popovers are used to provide additional information on elements where a simple tooltip is not sufficient.
 bootstrapLink: components/popovers
+description: Provide extra information with popovers.
 ---
 
 ## Default markup
 
 To create a default popover use:
 
-```html code example centered
+```html example centered
 <button type="button" class="btn" data-bs-toggle="popover" title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
 ```
 
@@ -25,16 +26,16 @@ Four options are available: `top`, `right`, `bottom`, and `left` aligned. Direct
 
 ```html
 <button type="button" class="btn" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Top popover">
-Popover on top
+  Popover on top
 </button>
 <button type="button" class="btn" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="Right popover">
-Popover on right
+  Popover on right
 </button>
 <button type="button" class="btn" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Bottom popover">
-Popover on bottom
+  Popover on bottom
 </button>
 <button type="button" class="btn" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="Left popover">
-Popover on left
+  Popover on left
 </button>
 ```
 
@@ -47,9 +48,7 @@ Popover can be triggered `manual`, with a `click` and on `focus` and on `hover`.
 ```
 
 ```html
-<button type="button" class="btn btn-primary" data-bs-trigger="hover" data-bs-toggle="popover"
-  title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?"
->
+<button type="button" class="btn btn-primary" data-bs-trigger="hover" data-bs-toggle="popover" title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">
   Hover to toggle popover
 </button>
 ```

package/docs/ui/components/progress.mdx

@@ -1,7 +1,8 @@
 ---
 title: Progress bars
-description: Progress bars are used to provide feedback on an action status and inform users of the current progress. Although seemingly small interface elements, they are extremely hepful in managing users' expectations and preventing them from abandoning a process they have initiated.
+summary: Progress bars are used to provide feedback on an action status and inform users of the current progress. Although seemingly small interface elements, they are extremely hepful in managing users' expectations and preventing them from abandoning a process they have initiated.
 bootstrapLink: components/progress
+description: Track and display progress visually.
 ---
 
 ## Default markup
@@ -26,22 +27,16 @@ To create a default progress bar, add a `.progress` class to a `<div>` element.
 
 Using Bootstrap’s typical naming structure, you can create a standard progress bar or scale it up or down to different sizes based on what’s needed.
 
-```html code example columns={1} centered
-<div class="progress progress-sm">
-  <div class="progress-bar" style="width: 57%" role="progressbar" aria-valuenow="57" aria-valuemin="0" aria-valuemax="100" aria-label="57% Complete">
-    <span class="visually-hidden">57% Complete</span>
-  </div>
-</div>
+```html
+<div class="progress progress-sm">...</div>
 ```
 
-## Progress without value
+Look at the example below to see how it works:
 
-Remove the displayed value by adding the `.visually-hidden` class.
-
-```html code example columns={1} centered
-<div class="progress">
-  <div class="progress-bar" style="width: 75%" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" aria-label="75% Complete">
-    <span class="visually-hidden">75% Complete</span>
+```html example columns={1} centered
+<div class="progress progress-sm">
+  <div class="progress-bar" style="width: 57%" role="progressbar" aria-valuenow="57" aria-valuemin="0" aria-valuemax="100" aria-label="57% Complete">
+    <span class="visually-hidden">57% Complete</span>
   </div>
 </div>
 ```
@@ -50,7 +45,7 @@ Remove the displayed value by adding the `.visually-hidden` class.
 
 You can create a progress bar which shows indeterminate progress by adding `.progress-bar-indeterminate` to the `.progress-bar` element.
 
-```html code example columns={1} centered
+```html example columns={1} centered
 <div class="progress progress-sm">
   <div class="progress-bar progress-bar-indeterminate"></div>
 </div>
@@ -58,17 +53,25 @@ You can create a progress bar which shows indeterminate progress by adding `.pro
 
 ## Native progress element
 
-You can also use native HTML5 `<progress>` element.
+You can also use native HTML5 `<progress>` element. It is a great way to create a progress bar without the need for additional HTML elements.
+
+```html
+<progress class="progress progress-sm" value="15" max="100" />
+```
+
+This is how it looks like:
 
-```html code example columns={1} centered
+```html example columns={1} centered
 <progress class="progress progress-sm" value="15" max="100" />
 ```
 
 ## Progress color
 
-Customize the color of the progress bar to suit your design. Click [here](/docs/ui/colors) to see the list of available colors.
+You can change the color of the progress bar by adding a color class to the `.progress-bar` element. You can use the color classes like `.bg-primary`, `.bg-success`, etc. to change the color of the progress bar.
+
+Full list of available colors can be found [here](/docs/ui/base/colors).
 
-```html code example columns={1} centered separated
+```html example columns={1} centered separated
 <div class="progress">
   <div class="progress-bar bg-red" style="width: 24%" role="progressbar" aria-valuenow="24" aria-valuemin="0" aria-valuemax="100" aria-label="24% Complete">
     <span class="visually-hidden">24% Complete</span>
@@ -90,3 +93,101 @@ Customize the color of the progress bar to suit your design. Click [here](/docs/
   </div>
 </div>
 ```
+
+## Multiple progress bars
+
+You can stack multiple progress bars on top of each other to create a visually appealing design. This can be done by adding multiple `.progress` elements inside a `.progress-stacked` container.
+
+```html
+<div class="progress-stacked">
+  <div class="progress">...</div>
+</div>
+```
+
+This is how it looks like:
+
+```html example columns={2} centered 
+<div class="progress-stacked">
+  <div class="progress" style="width: 15%">
+    <div class="progress-bar"></div>
+  </div>
+  <div class="progress" style="width: 30%">
+    <div class="progress-bar bg-success"></div>
+  </div>
+  <div class="progress" style="width: 20%">
+    <div class="progress-bar bg-info"></div>
+  </div>
+</div>
+```
+
+## Striped progress
+
+You can create a striped progress bar by adding the `.progress-bar-striped` class to the `.progress-bar` element.
+
+```html
+<div class="progress">
+  <div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 60%"></div>
+</div>
+```
+
+This is how it looks like:
+
+```html example columns={1} centered separated 
+<div class="progress">
+  <div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 60%"></div>
+</div>
+```
+
+## Progress background
+
+By using a progress bar component as a background element, designers can create a dynamic and engaging visual experience for users. For example, the progress bar could be used to represent the completion of a long-term goal or project, such as a fundraising campaign or construction project. As users interact with the page, the progress bar could gradually fill up, creating a sense of momentum and progress.
+
+```html
+<div class="progressbg">
+  <div class="progress progressbg-progress">
+    <div class="progress-bar bg-primary-lt" style="width: 65%"></div>
+  </div>
+  <div class="progressbg-text">Poland</div>
+  <div class="progressbg-value">65%</div>
+</div>
+```
+
+Thanks to this you can create a nice looking statistics section:
+
+```html example vertical separated centered columns={1} plugins="flags" height="20rem"
+<div class="progressbg">
+  <div class="progress progressbg-progress">
+    <div class="progress-bar bg-primary-lt" style="width: 65%"></div>
+  </div>
+  <div class="progressbg-text">Poland</div>
+  <div class="progressbg-value">65%</div>
+</div>
+<div class="progressbg">
+  <div class="progress progressbg-progress">
+    <div class="progress-bar bg-primary-lt" style="width: 35%"></div>
+  </div>
+  <div class="progressbg-text">Germany</div>
+  <div class="progressbg-value">35%</div>
+</div>
+<div class="progressbg">
+  <div class="progress progressbg-progress">
+    <div class="progress-bar bg-primary-lt" style="width: 28%"></div>
+  </div>
+  <div class="progressbg-text">United Stated</div>
+  <div class="progressbg-value">28%</div>
+</div>
+<div class="progressbg">
+  <div class="progress progressbg-progress">
+    <div class="progress-bar bg-primary-lt" style="width: 20%"></div>
+  </div>
+  <div class="progressbg-text">United Kingdom</div>
+  <div class="progressbg-value">20%</div>
+</div>
+<div class="progressbg">
+  <div class="progress progressbg-progress">
+    <div class="progress-bar bg-primary-lt" style="width: 15%"></div>
+  </div>
+  <div class="progressbg-text">France</div>
+  <div class="progressbg-value">15%</div>
+</div>
+```

package/docs/ui/components/range-slider.mdx

@@ -1,6 +1,8 @@
 ---
 title: Range slider
 libs: nouislider
+description: Adjust values with range sliders.
+summary: Range sliders allow users to select a range of values by adjusting two handles along a track, providing an intuitive and space-efficient input method.
 ---
 
 To be able to use the range slider in your application you will need to install the nouislider dependency with `npm install nouislider`.
@@ -9,9 +11,22 @@ All options and features can be found [**here**](https://refreshless.com/nouisli
 
 ## Basic range slider
 
-```html code example centered
-<div data-slider='{"js-name": "slider0","start": 50,"range": {"min": 0,"max": 100}}'></div>
-<p demo-slider="slider0"></p>
+```html example centered vendors libs="nouislider" columns={1}
+<div id="range-simple"></div>
+
+<script>
+  document.addEventListener("DOMContentLoaded", function() {
+    window.noUiSlider && (noUiSlider.create(document.getElementById('range-simple'), {
+      start: 20,
+      connect: [true, false],
+      step: 10,
+      range: {
+        min: 0,
+        max: 100
+      }
+    }));
+  });
+</script>
 ```
 
 That's only the basic features and options of range slider. More possibilities can be found [**here**](https://refreshless.com/nouislider/).