JSFiddle - React, Tailwind, and code Playground
HTML
<div id="container">
<div id="sens1" class="sliderp"></div>
<div id="sens2" class="sliderp"></div>
</div>
JavaScript
$(".sliderp").each(function() {
$this = $(this);
var divp = (this.id);
(function() {
$.widget("ui.timeslider", {
options: {
animate: false,
days: ["Lunes"+ divp,"Martes"+ divp,"Miércoles"+ divp,"Jueves"+ divp,"Viernes"+ divp,"Sábado"+ divp,"Domingo"+ divp],
distance: 0,
max: 1440,
min: 0,
orientation: "horizontal",
range: true,
slide: function(event,ui){
function formatTime(time){
var hours = parseInt(time / 60 % 24);
var minutes = parseInt(time % 60);
minutes = minutes + "";
if (minutes.length == 1) {
minutes = "0" + minutes;
}
return hours + ":" + minutes;
}
var startTime = formatTime(ui.values[0]);
var endTime = formatTime(ui.values[1]);
var selector = "#"+this.id;
$(selector + "-time1").val(formatTime(ui.values[0]));
$(selector + "-time2").val(formatTime(ui.values[1]));
//alert (selector)
},
step: 5,
value: 0,
//values: [0, 0]
},
_create: function(){
var self = this,
o = this.options,
dayslength = o.days.length;
o.timeslider = this;
function getTime(time){
var times = time.split(':');
time = (times[0] * 60) + parseInt(times[1]);
return time;
}
for(var i=0; i < dayslength; i++){
self.element.append(self._sliderhtml(o.days[i]));
$( "#" + o.days[i] ).slider(o);
var slider = "#" + o.days[i];
var dia_in2 = ( o.days[i] + "-time1");
var newval1 = getTime($("#"+dia_in2).val());
if(!isNaN(newval1)) $(slider).slider("values" , 0 , newval1);
var dia_out2 = ( o.days[i] + "-time2");
var newval2 = getTime($("#"+dia_out2).val());
if(!isNaN(newval2)) $(slider).slider("values" , 1 , newval2);
$( "#" + o.days[i] + "-time1").bind("change",function(){
var slider = "#" +...