Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2025-12-26 11:16:12 +04:00
Code Issues Projects Releases Wiki Activity

docs fixes

Browse Source
This commit is contained in:
codecalm
2025-01-03 02:58:40 +01:00
parent 9be6ea257c
commit bded6a46e6
2 changed files with 18 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
docs/ui/components/inline-player.mdx
View File

@@ -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>

19
docs/ui/components/range-slider.mdx
View File

@@ -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/).