Choisir une durée à conserver avec un slider

Pour un script de téléchargement de vidéo(youtube-dl), je voulais pouvoir définir simplement et rapidement une durée pour couper une vidéo/musique et garder seulement la partie choisie en JS(jquery)
Pour faire simple imaginons qu’on est une vidéo de deux minutes et qu’on veut en conserver qu’une petite partie, ça peut être compliqué et l’utilisateur pourrait faire n’importe quoi.

Il nous faut un slider de type range:

slider_js_jquery

Le code HTML:

<div id="slider-range"></div>
<div id="temps_coupure_fichier_debut"></div>
<div id="temps_coupure_fichier_fin"></div>

Le code JS:

$(function() {
	$("#slider-range").slider({
		range: true,
		min: 0,
		max: 237,
		values: [0, 237],
		slide: function( event, ui ) {
			$("#temps_coupure_fichier_debut").html(ui.values[0]);
			$("#temps_coupure_fichier_fin").html(ui.values[1]);
		}
	});
});

Comme on peut le voir, j’ai défini un nombre minimum et maximum et deux valeur par défaut.
Ensuite la parti la plus importante: A chaque moment qu’on modifie un des cotés du slider on récupère le résultat et on l’affiche dans les div associés.

Le problème c’est qu’on va avoir juste le résultat en seconde et ça peut être compliqué pour certain, on va donc y afficher plus « simplement » sous le format 00:00:00:

	//La fonction qui convertit les secondes en 00:00:00:
function duree1(donnees) {
			secondes = donnees;
			temp = secondes % 3600;
			var heures = ( secondes - temp ) / 3600 ;
			var secondes = temp % 60 ;
			var minutes = ( temp - secondes ) / 60;
			heures = ((heures < 10) ? "0" + heures : heures);
			minutes = ((minutes < 10) ? "0" + minutes : minutes);
			secondes = ((secondes < 10) ? "0" + secondes : secondes);
			return heures + ":" + minutes + ":" + secondes;
}

$("#slider-range").slider({
		range: true,
		// animate: "fast",
		step: 1,
		min: 0,
		max: 237,
		values: [0, 237],
		slide: function( event, ui ) {
			
			var duree_debut_texte = duree1(ui.values[0]);
			var duree_fin_texte = duree1(ui.values[1]);
		
			$("#temps_coupure_fichier_debut").val( duree_debut_texte);
			$("#temps_coupure_fichier_fin").val(duree_fin_texte);
		}
	});

Cette fois on y affiche dans un input pour y modifié nous même:

<input type="text" id="temps_coupure_fichier_debut" style="border:0; color:#f6931f; font-weight:bold;" maxlength="8"> - <input type="text" id="temps_coupure_fichier_fin" style="border:0; color:#f6931f; font-weight:bold;"  maxlength="8">

Ensuite on va prendre en compte les changements directement dans l’input car si on a une grosse durée il peut être difficile d’être précis:

	// La fonction inverse pour tout remettre en seconde et y transmettre au slider:
function duree2(donnees) {
var myArray = donnees.split(':');		
	if (myArray[2] > 0)
		{
seconde = myArray[2];
		} 
	else
		{
seconde = 0;
		} 
	if (myArray[1] > 0)
		{
minute = myArray[1]*60;
		} 
	else
		{
minute = 0;
		} 
	if (myArray[0] > 0)
		{
heure = myArray[0]*3600;
		} 
	else
		{
heure = 0;
		} 
return calc = parseInt(heure)+parseInt(minute)+parseInt(seconde);
}
var temps_coupure_fichier_debut = 0;
	var temps_coupure_fichier_fin = <?=$donnees->duration;?>;

	$(document).on('blur', "#temps_coupure_fichier_debut", function(){
		temps_coupure_fichier_debut = duree2( $(this).val() );
		$("#slider-range").slider({values: [temps_coupure_fichier_debut, temps_coupure_fichier_fin]});
		$('#test').html(temps_coupure_fichier_debut + ' - ' + temps_coupure_fichier_fin);
	});
	
	$(document).on('blur', "#temps_coupure_fichier_fin", function(){
		temps_coupure_fichier_fin = duree2( $(this).val() );
		$("#slider-range").slider({values: [temps_coupure_fichier_debut, temps_coupure_fichier_fin]});
		$('#test').html(temps_coupure_fichier_debut + ' - ' + temps_coupure_fichier_fin);
	});

Le code n’est peut-être pas parfait et optimisé, mais ça fonctionne^^.