diff --git a/docs/ui/components/inline-player.mdx b/docs/ui/components/inline-player.mdx
index a71f51be5..6ccecec9e 100644
--- a/docs/ui/components/inline-player.mdx
+++ b/docs/ui/components/inline-player.mdx
@@ -6,7 +6,7 @@ description: A simple, lightweight, accessible and customizable HTML5, YouTube a
 
 ## Sample demo
 
-```html example 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 +19,7 @@ description: A simple, lightweight, accessible and customizable HTML5, YouTube a
 
 ## Vimeo file
 
-```html example 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>
diff --git a/docs/ui/components/range-slider.mdx b/docs/ui/components/range-slider.mdx
index ee3d8c025..d049ba247 100644
--- a/docs/ui/components/range-slider.mdx
+++ b/docs/ui/components/range-slider.mdx
@@ -9,9 +9,22 @@ All options and features can be found [**here**](https://refreshless.com/nouisli
 
 ## Basic range slider
 
-```html 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/).