# Plugins
### Media Player
Inside the media cards, for both the audio and video players we have used the Plyr Library. In order to see the full documentation, you can go [here](https://github.com/sampotts/plyr).
In order to use it, you will need to import its custom CSS and JS. We have used their CDN, but you can also download the files from Github and import them in your project.
Needed files:
```markup
```
### Example
Here is an example for a audio player inside a card:
```markup
```
```javascript
//javascript
const player4 = new Plyr('#player4',{
controls: ['play', 'progress', 'current-time', 'duration', 'fullscreen']
});
```
### Sliders
In order to add sliders to the page, we have used the noUISliders and have added a layer of design. To see the full functionality of the library, you can check they [GitHub Documentation](https://refreshless.com/nouislider/).
And here is an example of how to use it:
```markup
100
-
850
```
```javascript
//javascript
var slider = document.getElementById('sliderRefine');
noUiSlider.create(slider, {
start: [150, 1600],
connect: true,
range: {
'min': [0],
'max': [2000]
}
});
var limitFieldMin = document.getElementById('price-left');
var limitFieldMax = document.getElementById('price-right');
slider.noUiSlider.on('update', function(values, handle) {
if (handle) {
limitFieldMax.innerHTML = $('#price-right').data('currency') + Math.round(values[handle]);
} else {
limitFieldMin.innerHTML = $('#price-left').data('currency') + Math.round(values[handle]);
}
});
```
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://bootstrapbay.gitbook.io/grace-ui-kit/plugins.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.