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.

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:

<link rel="stylesheet" href="https://cdn.plyr.io/3.3.21/plyr.css">
<script src="https://cdn.plyr.io/3.3.21/plyr.polyfilled.js"></script>

Example

Here is an example for a audio player inside a card:

<!-- html -->
<div class="card card-full-image card-audio-4" style="background-image: url('assets/media/img/video/audio_4.jpg')">
	<div class="card-header d-flex justify-content-between">
		<div class="p-2">
			<a href="#" class="btn btn-xs btn-link">Popular</a>
		</div>
		<div class="p-2">
			<a href="#" class="btn btn-xs btn-link btn-white"><i class="fas fa-ellipsis-h"></i></a>
		</div>
	</div>
	<div class="card-body">	
		<div class="row">
			<div class="col-md-4 offset-md-6">
				<div class="info">
					<h3 class="track">London</h3>
					<h6 class="artist">Benjamin Clementine</h6>
				</div>
				<div class="player">
					<audio id="player4" controls>
					  <source src="assets/media/audio/kendrick.mp3" type="audio/mp3">
					  Your browser does not support the audio element.
					</audio>
				</div>
			</div>
		</div>
	</div>
</div>

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

And here is an example of how to use it:

<!-- html -->
<div class="d-flex justify-content-between">
	<div class="left">
		<span id="price-left" class="price-left pull-left" data-currency="$">100</span>
	</div>
	<div class="dash">-</div>
	<div class="right">
		<span id="price-right" class="price-right pull-right" data-currency="$">850</span>
	</div>
</div>
<div id="sliderRefine" class="slider slider-refine"></div>

//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]);
    }
});