1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55
| <form action="get" >
<div id="leftvalue"></div> <input type="text" value="id="leftvalue"" name="leftvalue">
<div id="rightvalue"></div> <input type="text" value="id="rightvalue"" name="leftvalue">
<input type="submit" value="Envoyer le formulaire">
<script>
var slider = document.getElementById("slider"),
leftValue = document.getElementById('leftvalue'),
rightValue = document.getElementById('rightvalue');
ok = document.getElementById('rightvalue');
var initialStartMinute = 420,
initialEndMinute = 1200,
step = 30;
slider = noUiSlider.create(slider,{
start:[initialStartMinute,initialEndMinute],
connect:true,
step:step,
range:{
'min':initialStartMinute,
'max':initialEndMinute
}
});
var convertValuesToTime = function(values,handle){
var hours = 0,
minutes = 0;
if(handle === 0){
hours = convertToHour(values[0]);
minutes = convertToMinute(values[0],hours);
leftValue.innerHTML = formatHoursAndMinutes(hours,minutes);
return;
};
hours = convertToHour(values[1]);
minutes = convertToMinute(values[1],hours);
rightValue.innerHTML = formatHoursAndMinutes(hours,minutes);
};
var convertToHour = function(value){
return Math.floor(value / 60);
};
var convertToMinute = function(value,hour){
return value - hour * 60;
};
var formatHoursAndMinutes = function(hours,minutes){
if(hours.toString().length == 1) hours = '0' + hours;
if(minutes.toString().length == 1) minutes = '0' + minutes;
return hours+':'+minutes;
};
slider.on('update',function(values,handle){
convertValuesToTime(values,handle);
});
</script> |
Partager